Extjs4 Sass - Gradients - Mixin

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 파일입니다 $base-color 및 $font-size 같은

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

변수가 작동하고 있지만 $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 배경 구배 * @param {색상} $의 그라데이션 의 배경색 그래서 내가 $ 배경 구배를 사용하려고 배경색 및 $ bg- 어떤 변화없이 색깔.