Extjs4 Sass - 漸變 - 混合

我正在嘗試使用SASS與ExtJS 4但一些變量不起作用。Extjs4 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不起作用。有小費嗎？

來源

2011-08-30 Ahmet

所有已預先定義使用的變量都位於/extjs4/resources/themes/stylesheets/ext4/default/variables文件夾中。有幾個文件，每個文件都有許多不同的變量。你應該仔細看看這些文件，並確保上面的變量實際上在那裏。

此外，widgets文件夾包含ui mixin定義。這些也很有用，它們的應用與變量有所不同。

以下指南：http://docs.sencha.com/ext-js/4-0/#!/guide/theming包含更詳細的信息，並可能會有所幫助。

來源

2011-08-30 14:24:57 LittleTreeX

謝謝你的幫助和信息。我從這些文件中獲得了像「$ base-color」這樣的變量：resources \ themes \ stylesheets \ ext4 \ default \ mixins \ _background-gradient.scss – Ahmet

爲了進一步闡明這一點。您正試圖更改用於小部件的mixins內部使用的變量。您需要找到用作參數的變量，然後在主題文件中更改它們。 –

在文件註釋：/ ** * 背景@mixin梯度 * @參數{顏色} $背景顏色漸變的背景顏色，所以我嘗試使用$背景梯度和$ BG-顏色沒有任何變化..

來源

2011-08-31 07:13:45 Ahmet

Extjs4 Sass - 漸變 - 混合

回答

相關問題