Style

优质

小牛编辑

123浏览

2023-12-01

应用程序样式是指用户调整组件的外观。这些调整可能包括:颜色，颜色渐变，字体，边距/填充等.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（例如$ base-color:＃808080）这种基色将在整个主题中使用。
2	$base-gradient $ base-gradient:string（例如$ base-gradient:'matte'）此基本渐变将在整个主题中使用。
3	$body-background-color $ body-background-color:color（例如$ body-background-color:＃808080）应用于body元素的背景颜色。如果设置为透明或“无”，则不会在body元素上设置背景颜色样式。
4	$color $ color:color（例如$ color:＃808080）此默认文本颜色将在整个主题中使用。
5	$font-family $ font-family:string（例如$ font-family:arial）此默认字体系列将在整个主题中使用。
6	$font-size $ font-size:number（例如$ font-size:9px）此默认字体大小将在整个主题中使用。
7	$font-weight $ font-weight:string/number（例如$ font-weight:normal）此默认字体权重将在整个主题中使用。
8	$font-weight-bold $ font-weight-bold:字符串/数字（例如$ font-weight-bold:bold）此粗体字体的默认字体粗细将在整个主题中使用。
9	$include-chrome $ include-chrome:boolean（例如$ include-chrome:true）是的，包括Chrome特定规则。
10	$include-ff $ include-ff:boolean（例如$ include-ff:true）如果包含Firefox特定规则，则为True。
11	$include-ie $ include-ie:boolean（例如$ include-ie:true）如果包含IE9及更低版本的Internet Explorer特定规则，则为True。
12	$include-opera $ include-opera:boolean（例如$ include-opera:true）如果包含Opera特定规则，则为True。
13	$include-safari $ include-safari:boolean（例如$ include-safari:true）如果包含Opera特定规则，则为True。
14	$include-webkit $ include-webkit:boolean（例如$ include-webkit:true）如果包含Webkit特定规则，则为True。

Sr.No	变量和描述
1	$base-color $ base-color:color（例如$ base-color:＃808080）这种基色将在整个主题中使用。
2	$base-gradient $ base-gradient:string（例如$ base-gradient:'matte'）此基本渐变将在整个主题中使用。
3	$body-background-color $ body-background-color:color（例如$ body-background-color:＃808080）应用于body元素的背景颜色。如果设置为透明或“无”，则不会在body元素上设置背景颜色样式。
4	$color $ color:color（例如$ color:＃808080）此默认文本颜色将在整个主题中使用。
5	$font-family $ font-family:string（例如$ font-family:arial）此默认字体系列将在整个主题中使用。
6	$font-size $ font-size:number（例如$ font-size:9px）此默认字体大小将在整个主题中使用。
7	$font-weight $ font-weight:string/number（例如$ font-weight:normal）此默认字体权重将在整个主题中使用。
8	$font-weight-bold $ font-weight-bold:字符串/数字（例如$ font-weight-bold:bold）此粗体字体的默认字体粗细将在整个主题中使用。
9	$include-chrome $ include-chrome:boolean（例如$ include-chrome:true）是的，包括Chrome特定规则。
10	$include-ff $ include-ff:boolean（例如$ include-ff:true）如果包含Firefox特定规则，则为True。
11	$include-ie $ include-ie:boolean（例如$ include-ie:true）如果包含IE9及更低版本的Internet Explorer特定规则，则为True。
12	$include-opera $ include-opera:boolean（例如$ include-opera:true）如果包含Opera特定规则，则为True。
13	$include-safari $ include-safari:boolean（例如$ include-safari:true）如果包含Opera特定规则，则为True。
14	$include-webkit $ include-webkit:boolean（例如$ include-webkit:true）如果包含Webkit特定规则，则为True。