application.scss

Question

将this tutorial与Sencha Touch 2.2.1一起使用，由于未定义的$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".

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

注意：这是之前版本中的bug（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;

注意：我安装了Ruby 1.9.3p448。

Answer 1

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

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

要注意的最重要的变化是远离使用每个组件的mixins。

有了这个说法。他们改变了使用@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文件

然后在带有终端的sass目录下使用$ compass compile并最终工作。

这是我的代码：

# 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

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

我也摆脱了所有特定于sencha的包含，因为“all”覆盖了它们，所以你会有：

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

Sencha Touch 2.2.1上的Compass编译错误，未定义$ font-family值和mixin问题

application.scss

2 个答案: