应用程序样式是指用户调整组件的外观.这些调整可能包括:颜色，颜色渐变，字体，边距/填充等.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) 此默认值在整个主题中使用font-size. |
| 7 | $ font-weight $ font-weight:string/number(例如$ font-权重:正常) 此默认字体权重将在整个主题中使用. |
| 8 | $ font-weight-bold $ font-weight-bold:string/number(例如$ font-weight-bold:bold) 在整个主题中使用粗体字体的默认字体粗细. |
| 9 | $ include-chrome $ include-chrome:boolean(例如$ include-chrome:true) 如果包含Chrome特定规则，则为真. |
| 10 | $ include-ff $ include-ff:boolean(例如$ include-ff:true) 如果包含Firefox特定规则，则为真. |
| 11 | $ include-ie $ include-ie:boolean(例如$ include-ie:true) 为True以包含Internet Explorer特定IE9及更低版本的规则. |
| 12 | $ include-opera $ include-opera:boolean(例如$ include-opera:true) 如果包含Opera特定规则，则为真. |
13 | $ include-safari $ include-safari:boolean (例如$ include-safari:true) 如果包含Opera特定规则，则为真. |
| 14 | $ include-webkit $ include- webkit:boolean(例如$ include-webkit:true) 为True以包含Webkit特定规则. |
