Compass compile error on Sencha Touch 2.2.1, undefined $font-family value and mixin problems -

using this tutorial sencha touch 2.2.1, i'm not able compile project because of undefined $font-family variable:

error application.scss (line 2 of _class.scss: undefined variable: "$font-family".)  sass::syntaxerror on line ["2"] of  /users/mac/sites/apps/myapp/touch/resources/themes/stylesheets/sencha- touch/default/src/_class.scss: undefined variable: "$font-family". 

does have idea how solve this?

note: bug in previous version (sencha touch 2.2).

application.scss

  1 $base-color: #7a1e08;   2 $base-gradient: 'glossy';   3    4 @import 'sencha-touch/default/all';   5     6  @include sencha-panel;   7  @include sencha-buttons;   8  @include sencha-sheet;   9  @include sencha-picker;  10  @include sencha-toolbar-forms;  11  @include sencha-tabs;  12  @include sencha-toolbar;  13  @include sencha-carousel;  14  @include sencha-indexbar;  15  @include sencha-list;  16  @include sencha-layout;  17  @include sencha-form;  18  @include sencha-loading-spinner; 

note: have ruby 1.9.3p448 installed.

i found how solve problem.

looking @ sencha-touch 2.2.1 docs on upgrading themes sencha touch 2.1 2.2 stay:

the important change aware of move away using mixins each component.

with say. changed way include components using @import instead of @include this:

@import 'sencha-touch/default/src/panel'; 

also notice docs use @import 'sencha-touch/default/panel'; right way adding src/_the_component_ directory e.g. @import 'sencha-touch/default/src/panel';

i didn't create new directory config.rb , theme.scss. modified app.scss file exists in my_app/resources/sass/app.scss

then under sass directory terminal used $ compass compile , works.

here code:

# apps.scss $base-color: #af2584;  @import 'sencha-touch/default'; @import 'sencha-touch/default/all';   @import 'sencha-touch/default/src/button'; @import 'sencha-touch/default/src/panel'; @import 'sencha-touch/default/src/sheet'; @import 'sencha-touch/default/src/messagebox'; @import 'sencha-touch/default/src/toolbar'; @import 'sencha-touch/default/src/carousel/carousel';