Changing default blue theme to green

Question

I want to change the default blue color of my Sencha Touch application to green. The steps I followed are listed below:

1. gem update --system

2. gem install compass

3. compass create myfile

4. Copied a .scss file and pasted it in the touch-2.2.1/resources/sqss/ directory.

5. Pasted the following code in that file and named it happy.css:

   $base-color: #709e3f;
   @import 'sencha-touch/default/all';
   @include sencha-panel;
   @include sencha-buttons;
   @include sencha-sheet;
   @include sencha-tabs;
   @include sencha-toolbar;
   @include sencha-list;
   @include sencha-layout;
   @include sencha-loading-spinner;
   

6. compass compile happy.scss

7. Replaced the name happy.scss in the app.html page.

8. Ran the application, and I got the following error:

   Syntax error: Undefined variable: "$font-family".\a on line 2 of /Applications/XAMPP/xamppfiles/htdocs/touch-2.2.1/resources/themes/stylesheets/sencha-touch/default/src/_Class.scss\a from line 1 of /Applications/XAMPP/xamppfiles/htdocs/touch-2.2.1/resources/themes/stylesheets/sencha-touch/default/src/_all.scss\a from line 1 of /Applications/XAMPP/xamppfiles/htdocs/touch-2.2.1/resources/themes/stylesheets/sencha-touch/default/_all.scss\a from line 3 of /Applications/XAMPP/xamppfiles/htdocs/touch-2.2.1/resources/sass/happy.scss\a\a 1: /Applications/XAMPP/xamppfiles/htdocs/touch-2.2.1/resources/sass/happy.scss

How can I solve this?

Answer 1

Add the following line

@import 'sencha-touch/default';

Before this line

@import 'sencha-touch/default/all';

Also as per documentation

There are a lot of changes from Sencha Touch 2.1 to 2.2,

The most important change to be aware of is the move away from using mixins 
for each component

We found that using mixins for each component was quite slow when compiling your Sass, 
so we decided to simply move to using @import to just include each component.

In Touch 2.1, your stylesheet looked like this:

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
// and other components…

In Touch 2.2, it looks like this:

@import 'sencha-touch/default';

@import 'sencha-touch/default/Panel';
@import 'sencha-touch/default/Button';
// and other components