【问题标题】：Compass compile error on Sencha Touch 2.2.1, undefined $font-family value and mixin problemsSencha Touch 2.2.1 上的 Compass 编译错误、未定义的 $font-family 值和 mixin 问题
【发布时间】：2013-07-09 10:59:54
【问题描述】：

在 Sencha Touch 2.2.1 中使用 this tutorial，由于未定义的 $font-family 变量，我无法编译我的项目：

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".

有人知道如何解决这个问题吗？

注意：这是以前版本（Sencha Touch 2.2）中的bug。

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;

注意：我安装了 Ruby 1.9.3p448。

【问题讨论】：

您是否尝试将 $font-family 变量设置为某些东西（放置在您的导入之前）？
@cimmanon，我刚试过，但也没用

标签： compiler-errors sencha-touch sass compass-sass mixing

【解决方案1】：

我遇到了同样的问题。解决方案是添加@import 'sencha-touch/default';。

我还删除了所有特定于煎茶的包含，因为“全部”涵盖了它们，所以你会：

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

【讨论】：

【解决方案2】：

我找到了解决这个问题的方法。

查看Upgrading Themes From Sencha Touch 2.1 to 2.2 上的 sencha-touch 2.2.1 文档：

需要注意的最重要的变化是不再使用每个组件的 mixin。

这么说。他们改变了使用 @import 而不是 @include 来包含组件的方式，如下所示：

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

还要注意文档使用@import 'sencha-touch/default/Panel';，但正确的做法是添加 src/_the_component_ 目录，例如@import 'sencha-touch/default/src/Panel';

我也没有使用 config.rb 和 theme.scss 创建新目录。我刚刚修改了my_app/resources/sass/app.scss中已经存在的app.scss文件

然后在我用$ compass compile的终端下sass目录下，终于可以工作了。

这是我的代码：

# 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';

【讨论】：