Extjs4 Sass渐变-混合

Question

我尝试在ExtJS 4中使用SASS，但一些变量不起作用。

我的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')

这是我的SCSS文件：

    // 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;

像$base-color和$font-size这样的变量可以工作，但$background-color不能工作。有什么建议吗？

Answer 1

已预定义要使用的所有变量都位于/extjs4/resources/themes/stylesheets/ext4/default/variables文件夹中。有几个文件，每个文件都有许多不同的变量。您应该仔细查看这些文件，并确保上面的变量确实在其中。

此外，widgets文件夹还包含ui混合定义。这些也很有用，而且它们的应用与变量略有不同。

下面的指南：http://docs.sencha.com/ext-js/4-0/#!/guide/theming包含更详细的信息，可能会有所帮助。

Answer 2

在文件注释中: /** * @mixin background-gradient * @param { color } $ background -color渐变的背景颜色，所以我尝试使用$background-gradient和$bg-color而不做任何更改。