📅  最后修改于: 2020-10-25 11:18:11             🧑  作者: Mango
应用程序样式是指用户调整组件的外观。这些调整可能包括:颜色,颜色渐变,字体,边距/填充等。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 | Variable & Description |
---|---|
1 |
$base-color $base-color: color (e.g. $base-color : #808080) This base color is to be used throughout the theme. |
2 |
$base-gradient $base-gradient: string (e.g. $base-gradient : ‘matte’) This base gradient is to be used throughout the theme. |
3 |
$body-background-color $body-background-color: color (e.g. $body-background-color : #808080) Background color to apply to the body element. If set to transparent or ‘none’, no background-color style will be set on the body element. |
4 |
$color $color : color (e.g. $color : #808080) This default text color is to be used throughout the theme. |
5 |
$font-family $font-family : string (e.g. $font-family : arial) This default font-family is to be used throughout the theme. |
6 |
$font-size $font-size : number (e.g. $font-size : 9px ) This default font-size is to be used throughout the theme. |
7 |
$font-weight $font-weight : string/number (e.g. $font-weight : normal ) This default font-weight is to be used throughout the theme. |
8 |
$font-weight-bold $font-weight-bold : string/number (e.g. $font-weight-bold : bold ) This default font-weight for bold font is to be used throughout the theme. |
9 |
$include-chrome $include-chrome : boolean (e.g. $include-chrome : true) True to include Chrome specific rules. |
10 |
$include-ff $include-ff : boolean (e.g. $include-ff : true) True to include Firefox specific rules. |
11 |
$include-ie $include-ie : boolean (e.g. $include-ie : true) True to include Internet Explorer specific rules for IE9 and lower. |
12 |
$include-opera $include-opera : boolean (e.g. $include-opera : true) True to include Opera specific rules. |
13 |
$include-safari $include-safari : boolean (e.g. $include-safari : true) True to include Opera specific rules. |
14 |
$include-webkit $include-webkit : boolean (e.g. $include-webkit : true) True to include Webkit specific rules. |