sencha touch - Changing default blue theme to green -

i want change default blue color of sencha touch application green. steps followed listed below:

1. gem update --system

2. gem install compass

3. compass create myfile

4. copied .scss file , pasted in touch-2.2.1/resources/sqss/ directory.

5. pasted following code in file , named 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 name happy.scss in app.html page.

8. ran application, , got 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 line 1 of /applications/xampp/xamppfiles/htdocs/touch-2.2.1/resources/themes/stylesheets/sencha-touch/default/src/_all.scss\a line 1 of /applications/xampp/xamppfiles/htdocs/touch-2.2.1/resources/themes/stylesheets/sencha-touch/default/_all.scss\a 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 solve this?

add following line

@import 'sencha-touch/default'; 

before line

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

also per documentation

there lot of changes sencha touch 2.1 2.2,  important change aware of move away using mixins  each component  found using mixins each component quite slow when compiling sass,  decided move using @import include each component. 

in touch 2.1, stylesheet looked this:

@import 'sencha-touch/default/all';  @include sencha-panel; @include sencha-buttons; // , other components… 

in touch 2.2, looks this:

@import 'sencha-touch/default';  @import 'sencha-touch/default/panel'; @import 'sencha-touch/default/button'; // , other components