extjs - 带有 sencha cmd 和 sass 的 extjs 4.2 主题：如何将 sass 变量与 css 属性匹配

Question

例如，我希望能够将表单触发颜色从其默认颜色更改为自定义颜色。看来我只能访问 Trigger.scss 中的 from-trigger-border-bottom 样式变量：

$form-trigger-width: 17px !default;
$form-trigger-border-bottom-width: 1px !default;
$form-trigger-border-bottom-style: solid !default;
$form-trigger-border-bottom-color: $form-field-border-color !default;
$form-trigger-border-bottom: $form-trigger-border-bottom-width $form-trigger-border-bottom-style $form-trigger-border-bottom-color !default;

$form-trigger-border-bottom-color-over: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default;
$form-trigger-border-bottom-color-focus: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default;
$form-trigger-border-bottom-color-focus-over: null !default;
$form-trigger-border-bottom-color-pressed: null !default;

Answer 1

您必须在 sass/scss 文件中覆盖这些变量。现在在导入的顶部执行它可能您的 sass 文件看起来像这样

@import 'ext4/default/all';

您需要在导入之前调用这些变量

$form-trigger-width: 17px !default;
$form-trigger-border-bottom-width: 1px !default;
$form-trigger-border-bottom-style: solid !default;
$form-trigger-border-bottom-color: $form-field-border-color !default;
@import 'ext4/default/all';

当然改变值做你想做的事