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：#808080）

该基色将在整个主题中使用。
2

$基础梯度

$base-gradient: 字符串 (例如 $base-gradient : 'matte')

这个基础渐变将在整个主题中使用。
3

$body-背景颜色

$body-background-color：颜色（例如$body-background-color：#808080）

应用于主体元素的背景颜色。如果设置为透明或“无”，则不会在主体元素上设置背景颜色样式。
4

$颜色

$color：颜色（例如$color：#808080）

此默认文本颜色将在整个主题中使用。
5

$字体系列

$font-family ：字符串（例如 $font-family ：arial）

这个默认字体系列将在整个主题中使用。
6

$字体大小

$font-size : 数字 (例如 $font-size : 9px )

这个默认字体大小将在整个主题中使用。
7

$字体粗细

$font-weight ：字符串/数字（例如 $font-weight ：normal ）

这个默认的字体粗细将在整个主题中使用。
8

$字体粗体

$font-weight-bold ：字符串/数字（例如 $font-weight-bold ：bold ）

粗体的默认字体粗细将在整个主题中使用。
9

$include-chrome

$include-chrome ：布尔值（例如 $include-chrome ：true）

True 包含 Chrome 特定规则。
10

$include-ff

$include-ff ：布尔值（例如 $include-ff ：true）

确实包含 Firefox 特定规则。
11

$include-ie

$include-ie ：布尔值（例如 $include-ie ：true）

正确，包括针对 IE9 及更低版本的 Internet Explorer 特定规则。
12

$include-歌剧

$include-opera : 布尔值（例如 $include-opera : true）

确实包括 Opera 特定规则。
13

$include-safari

$include-safari ：布尔值（例如 $include-safari ：true）

确实包括 Opera 特定规则。
14

$include-webkit

$include-webkit ：布尔值（例如 $include-webkit ：true）

确实包含 Webkit 特定规则。