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

Question

Using this tutorial with Sencha Touch 2.2.1, I'm not able to compile my project because of an 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 anyone have an idea how to solve this?

Note: This was a bug in the 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: I have Ruby 1.9.3p448 installed.

Answer 1

I found how to solve this problem.

looking at the sencha-touch 2.2.1 docs on the Upgrading Themes From Sencha Touch 2.1 to 2.2 stay:

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

with that say. They changed the way to include components using @import instead of @include like this:

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

also notice that the docs use @import 'sencha-touch/default/Panel'; but the right way to do it is adding the src/_the_component_ directory e.g. @import 'sencha-touch/default/src/Panel';

I also didn't create a new directory with the config.rb and theme.scss. I just modified the app.scss file that already exists in my_app/resources/sass/app.scss

Then under the sass directory with the terminal I used $ compass compile and finally works.

Here is my 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';

Answer 2

I ran into the same problem. The solution was to add @import 'sencha-touch/default';.

I also got rid of all the sencha-specific includes, since the "all" covered them, so you would have:

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