Extjs4 Sass-渐变-混合

我试图将SASS与ExtJS 4结合使用，但有些变量不起作用

我的SASS配置：

    # $ext_path: This should be the path of where the ExtJS SDK is installed
    # Generally this will be in a lib/extjs folder in your applications root
    # <root>/lib/extjs
    $ext_path = "../lib/extjs"

    # sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
    # Generally this will be in a resources/sass folder
    # <root>/resources/sass
    sass_path = File.dirname(__FILE__)

    # css_path: the directory you want your CSS files to be.
    # Generally this is a folder in the parent directory of your Sass files
    # <root>/resources/css
    css_path = File.join(sass_path, "..", "_css")

    # output_style: The output style for your compiled CSS
    # nested, expanded, compact, compressed
    output_style = :expanded

    # We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
    load File.join(sass_path, '..','resources','themes')

---

像

$base color

和

$font size

这样的变量正在工作，但是

$background color

不工作。任何提示？

所有预定义使用的变量都位于

/extjs4/resources/themes/stylesheets/ext4/default/variables

文件夹中。那里有几个文件，每个文件都有许多不同的变量。您应该仔细查看这些文件，并确保上面的变量实际上在其中

此外，

widgets

文件夹包含ui mixin定义。它们也很有用，它们的应用与变量略有不同

以下指南：包含更详细的信息，可能会有所帮助

在文件注释中：/** *@mixin背景梯度 *@param{Color}$background Color渐变的背景色

---

因此，我尝试使用$background gradient和$bg color，没有任何更改。

感谢您的帮助和信息。我从以下文件中获得了类似“$base color”的变量：resources\themes\stylesheets\ext4\default\mixins\u background-gradient.scss以进一步阐明这一点。您正在尝试更改小部件的mixin中使用的变量。您需要找到用作这些混合的参数的变量，并在主题文件中更改它们。

    // Wenn man alle Komponenten einbinden möchte, muss die Variabel $include-default auf true gestellt werden
    // Wenn diese auf true stehen sollte, könnte man die Einzel-Includes entfernen 
    $include-default: false;

    // Theme Name:
    $theme-name: 'MyTheme';

    // Custom Variabeln:
    $base-color: #ffe067; /* Hauptfarbe */
    $color: #595959; /* Text Standard Farbe */
    $font-size: 12px; /* Text Standard Größe */
    $font-family: arial,verdana,sans-serif; /* Text Standard Art */
    $base-gradient: 'glossy';
    $background-color: #ff0000;
    $ui-header-background-color: #ff0000;
    $ui-header-background-gradient: green;
    $ui-header-inner-border-color: #ff0000;
    $background-color-over: #ff0000;
    $background-gradient-over: #ff0000;
    $background-color-focus: #ff0000;
    $background-gradient-focus: #ff0000;
    $background-color-pressed: #ff0000;
    $background-gradient-pressed: #ff0000;
    $background-color-disabled: #ff0000;
    $background-gradient-disabled: #ff0000;


    @import 'ext4/default/all';

    // Einzelne Module können entfernt werden, falls diese nicht benötigt werden,
    // dies kann man machen um die CSS zu minimieren
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;