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。

打印页面