Extjs4 Sass - Градиенты - Миксин

Question

Я пытаюсь использовать 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')

И это мой файл 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 содержит определения пользовательского интерфейса. Они также полезны и применяются несколько иначе, чем переменная.

Следующее руководство: http://docs.sencha.com/ext-js/4-0/#!/guide/theming содержит более подробную информацию и, вероятно, будет полезно.

Answer 2

В файле комментариев: / ** * @mixin background-градиент * @param {Color} $ background-color Цвет фона градиента Итак, я попытался использовать $ background-градиент и $ bg-color без каких-либо изменений..