0

在 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文件，该文件包含variables/_button.scss中的变量定义，如果未定义变量，编译器会发出声音。

我的第一个问题是，为什么这不起作用/我错过了什么？

我的第二个，更广泛的 SASS 问题，我如何从 mixin 继承？橙色包含实际上是从 default-small extjs-button-ui 继承所有这些变量。所以我希望背景颜色和名称为橙色，但我希望其他所有内容都从默认小包含继承。这可能吗？我想是这样的：

@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 类，而不是我的背景颜色。那么我做错了什么？我已经尝试过到处寻找方法来实现这一点，但没有任何效果。有没有人有任何见解？

4

0 回答 0