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/_button.scssにある変数定義を含む_variables.scssファイルをインポートします。変数が未定義の場合、コンパイラは泣き言を言います。
私の最初の質問は、なぜこれが機能しないのですか/何が欠けているのですか?
2 つ目の、より広範な SASS の質問ですが、ミックスインから継承するにはどうすればよいですか? オレンジ色のインクルードは、実際にはdefault-small extjs-button-uiからこれらすべての変数を継承しています。したがって、背景色と名前をオレンジ色にしたいのですが、それ以外はすべてdefault-smallインクルードから継承したいと考えています。これは可能ですか？私は次のように考えました：
@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);
}
しかし、これは Ext JS で使用できるオレンジ色の UI を作成するものではありません...ボタンの値を持つオレンジ色の CSS クラスを作成するだけで、背景色は作成しません。それで、私は何を間違っていますか？これを達成する方法を探してみましたが、何も機能していません。誰にも洞察力がありますか？