SASS / Compass:从mixin继承

时间:2013-09-13 15:12:51

标签: extjs sass extjs4.1 compass-sass mixins

在Ext JS 4中,他们添加了一种使用SASS / Compass覆盖默认着色方案的方法,所以我要做的是使用extjs-button-ui创建一个新的按钮样式,然后应用它风格到一个按钮。按钮的代码如下:

xtype: 'button',
text: 'should be orange',
ui: 'orange'

我的SASS代码如下:

$button-default-background-color: mix(blue, red);
$orange-button-background-color: mix(yellow, red);
@import 'compass';
@import 'ext4/default/all';

@include extjs-button-ui(
  'orange',
  $button-small-border-radius,
  $button-small-border-width,

  $button-default-border-color,
  $button-default-border-color-over,
  $button-default-border-color-focus,
  $button-default-border-color-pressed,
  $button-default-border-color-disabled,

  $button-small-padding,
  $button-small-text-padding,

  $orange-button-background-color,
  $button-default-background-color-over,
  $button-default-background-color-focus,
  $button-default-background-color-pressed,
  $button-default-background-color-disabled,

  $button-default-background-gradient,
  $button-default-background-gradient-over,
  $button-default-background-gradient-focus,
  $button-default-background-gradient-pressed,
  $button-default-background-gradient-disabled,

  $button-default-color,
  $button-default-color-over,
  $button-default-color-focus,
  $button-default-color-pressed,
  $button-default-color-disabled,

  $button-small-font-size,
  $button-small-font-size-over,
  $button-small-font-size-focus,
  $button-small-font-size-pressed,
  $button-small-font-size-disabled,

  $button-small-font-weight,
  $button-small-font-weight-over,
  $button-small-font-weight-focus,
  $button-small-font-weight-pressed,
  $button-small-font-weight-disabled,

  $button-small-font-family,
  $button-small-font-family-over,
  $button-small-font-family-focus,
  $button-small-font-family-pressed,
  $button-small-font-family-disabled,

  $button-small-icon-size
);

我有几个问题/意见。当我编译它时,我没有错误和标准的Ext JS主题带有紫色按钮,但我上面定义的按钮没有样式......它只是文本。这些变量都包含在 _all.scss 文件中,该文件导入 _variables.scss 文件,其中包含变量/ _button.scss中的变量定义,如果vars未定义,编译器会发牢骚。

我的第一个问题是,为什么这不起作用/我缺少什么?

我的第二个更广泛的SASS问题,我如何从mixin继承? orange include实际上是从 default-small extjs-button-ui继承所有这些变量。所以我希望背景颜色和名称是橙色,但我希望其他所有内容都继承自 default-small include。这可能吗?我想的是:

@include extjs-button-ui(
  @include extjs-button-ui('default-small'),
  'orange',
  $button-default-background-color: mix(yellow, red)
}

将是票,但我显然是非常错误的。我可以通过以下方式继承mixin:

.orange {
  @include extjs-button-ui('default-small', $icon-size: 16px);
  $button-default-background-color: mix(yellow, red);
}

但是那不是我在Ext JS中创建的橙色ui ...只是一个橙色的CSS类,它有按钮值,但不是我的背景颜色。那么我做错了什么?我已经尝试过寻找完成此任务的方法,但没有任何工作。有没有人有任何见解?

0 个答案:

没有答案