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 变量。
| Sr.No | 变量和说明 |
|---|---|
| 1 | $base-color $base-color: color (e.g. $base-color : #808080) 此基本颜色将在整个主题中使用。 |
| 2 | $base-gradient $base-gradient:字符串(例如 $base-gradient : 'matte') 此基本渐变将在整个主题中使用。 |
| 3 | $body-background-color $body-background-color:颜色(例如 $body-background-color : #808080) 应用于主体元素的背景颜色。如果设置为透明或"无"，则不会在 body 元素上设置任何背景颜色样式。 |
| 4 | $color $color : color (例如 $color : #808080) 此默认文本颜色将在整个主题中使用。 |
| 5 | $font-family $font-family : string (例如 $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 : boolean(例如$include-chrome : true) True 表示包含 Chrome 特定规则。 |
| 10 | $include-ff $include-ff : 布尔值(例如 $include-ff : true) True 表示包含 Firefox 特定规则。 |
| 11 | $include-ie $include-ie : 布尔值(例如 $include-ie : true) True 表示包含 IE9 及更低版本的 Internet Explorer 特定规则。 |
| 12 | $include-opera $include-opera : 布尔值(例如 $include-opera : true) 如果为 True，则包含 Opera 特定规则。 |
| 13 | $include-safari $include-safari : 布尔值(例如 $include-safari : true) 如果为 True，则包含 Opera 特定规则。 |
| 14 | $include-webkit $include-webkit : 布尔值(例如$include-webkit : true) 如果为 True，则包含 Webkit 特定规则。 |
