Extjs SASS/Compass：从mixin继承

在ExtJS4中，他们通过使用SASS/Compass添加了一种覆盖默认着色方案的方法，因此我尝试创建一种新的按钮样式，使用

extjs按钮ui

，然后将该样式应用于按钮。按钮的代码如下所示：

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

$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
);

我的SASS代码如下：

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

$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
);

我有几个问题/意见。当我编译这个时，我没有得到任何错误，标准的ExtJS主题带有紫色按钮，但是我上面定义的按钮没有样式。。。只是文字。这些变量都包含在\u all.scss文件中，该文件导入\u variables.scss文件，该文件包含variables/\u button.scss中的变量定义，如果变量未定义，编译器将发出呜呜声

我的第一个问题是，为什么这不起作用/我遗漏了什么

还有我的第二个更宽泛的问题，我如何从混血中继承？orangeinclude实际上是从default smallextjs按钮ui继承了所有这些变量。因此，我希望背景颜色和名称为橙色，但我希望其他所有内容都继承自默认的smallinclude。这可能吗？我的想法是：

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

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

可能是票，但我显然大错特错了。我可以通过执行以下操作来继承mixin：

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

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

---

但这并不是创建一个我可以在ExtJS中使用的橙色ui。。。只是一个有按钮值的橙色CSS类，但没有我的背景色。那么我做错了什么？我试着到处寻找实现这一目标的方法，但没有任何效果。有人有什么见解吗？

值得注意的是，我也尝试过与

@extend

混在一起，但没有任何可能性。有什么方法可以提供

extjs按钮ui

混入的源代码吗？当然可以。。。我从widgets/_button.scss文件中复制了这个。此外，如果您想查看其中的其他文件，您可以使用peak。如果不进一步了解此库背后的设计，我只能告诉您，mixin的设计方式是生成创建该组件所需的所有选择器。如果您想使用extend（这将为您提供一个更紧凑的CSS文件），您必须找出默认小型类的类名（如

x-btn-default-toolbar-small

如果使用默认设置），然后开始覆盖您需要的任何内容。