Ext.js - 樣式

應用程式樣式指的是使用者對元件外觀和感覺的調整。這些調整可能包括：顏色、顏色漸變、字型、邊距/填充等。Ext JS 6 有了一種新的應用程式樣式方法。

它使用 SCSS 進行樣式設定。SCSS 是一種更動態的 CSS 程式碼編寫方式。我們可以藉助它在樣式表中編寫變數。但是，瀏覽器無法理解 SCSS。它只能理解 CSS，因此所有 SCSS 檔案都應該編譯成 CSS 以生成可用於生產的程式碼。

因此，SCSS 檔案被稱為預處理器檔案。在 Ext.js 中，編譯是透過 Sencha CMD 工具完成的。Sencha CMD 只使用以下命令手動編譯一次。

sencha app build [development]

Global_CSS 是主要的 CSS 檔案，其中包含與 ExtJS 關聯的所有 SCSS 變數，可用於在我們的應用程式中透過根據需要提供不同的值來自定義我們的主題。

以下是 Ext.js 中 Global_CSS 中的一些可用 CSS 變數。

序號	變數和描述
1	$base-color $base-color: 顏色 (例如 $base-color : #808080) 此基礎顏色將用於整個主題。
2	$base-gradient $base-gradient: 字串 (例如 $base-gradient : 'matte') 此基礎漸變將用於整個主題。
3	$body-background-color $body-background-color: 顏色 (例如 $body-background-color : #808080) 應用於 body 元素的背景顏色。如果設定為透明或“無”，則不會在 body 元素上設定 background-color 樣式。
4	$color $color : 顏色 (例如 $color : #808080) 此預設文字顏色將用於整個主題。
5	$font-family $font-family : 字串 (例如 $font-family : arial) 此預設字體系列將用於整個主題。
6	$font-size $font-size : 數字 (例如 $font-size : 9px ) 此預設字型大小將用於整個主題。
7	$font-weight $font-weight : 字串/數字 (例如 $font-weight : normal ) 此預設字型粗細將用於整個主題。
8	$font-weight-bold $font-weight-bold : 字串/數字 (例如 $font-weight-bold : bold ) 此預設粗體字型的字型粗細將用於整個主題。
9	$include-chrome $include-chrome : 布林值 (例如 $include-chrome : true) 如果要包含 Chrome 特定的規則，則為 true。
10	$include-ff $include-ff : 布林值 (例如 $include-ff : true) 如果要包含 Firefox 特定的規則，則為 true。
11	$include-ie $include-ie : 布林值 (例如 $include-ie : true) 如果要包含針對 IE9 及更低版本的 Internet Explorer 特定規則，則為 true。
12	$include-opera $include-opera : 布林值 (例如 $include-opera : true) 如果要包含 Opera 特定的規則，則為 true。
13	$include-safari $include-safari : 布林值 (例如 $include-safari : true) 如果要包含 Opera 特定的規則，則為 true。
14	$include-webkit $include-webkit : 布林值 (例如 $include-webkit : true) 如果要包含 Webkit 特定的規則，則為 true。

列印頁面