May 09, 2021 Extjs
Application style refers to how the user adjusts the appearance and feel of the component. /b10> These adjustments may include: color, color gradient, font, margin/fill, and so on. E xt JS 6 has a new application style.
It uses the style of SCSS. /b10> SCSS is a more dynamic way to write CSS code. /b11> With this help, we can write variables in our style sheet. /b12> However, the browser does not understand SCSS It can only understand CSS, so all SCSS files should be compiled into CSS production-ready code.
This is why SCSS files are called preprocessor files. /b10> In Extjs, compilation is done through the Sencha CMD tool.
Sencha CMD manually compiles it once using the command as follows:
Sencha Application Build (Development)
Global CSS is the main CSS file, it has all the SCSS variables associated with ExtJS, we can use it in our application to customize our theme, according to our needs to provide different value.
Here are some of the CSS Global_CSS in the list in Extjs:
| Number | Variables and descriptions |
|---|---|
| 1 |
$ base-color $ base-color:color (e.g. $ base-color: #808080) This base color is used throughout the theme. |
| 2 |
$ base-gradient $ base-gradient:string (e.g. $base-gradient: 'matte') Basic gradients used throughout the topic. |
| 3 |
$ body-background-color $ body-background-color:color (e.g. $body-background-color: #808080) The background color applied to the body element. If set to transparent or 'none', the background color style will not be set on the body element |
| 4 |
$ color $ color:color (e.g. $color:#808080) The default text color to use throughout the theme |
| 5 |
$ font-family $ font-family:string (e.g. $font-family:arial) The default foot-family used throughout the topic. |
| 6 |
$ font-size $ font-size:number (e.g. $ font-size: 9px) The default font size to use throughout the theme. |
| 7 |
$ font-weight $ font-weight: string / number (e.g. $ font-weight: normal) The default font weight used throughout the topic |
| 8 |
$ font-weight-bold $ font-weight-bold: string / number (e.g. $ font-weight-bold: bold) The default font weight for bold fonts is 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 contains Firefox-specific rules |
| 11 |
$ include-ie $include-ie:boolean (e.g. $include-ie:true) True includes Internet Explorer-specific rules for IE9 and earlier versions |
| 12 |
$ include-opera $include-opera: boolean (e.g. $include-opera:true) True contains Opera-specific rules |
| 13 |
$ include-safari $include-safari: boolean (e.g. $include-safari:true) True contains Opera-specific rules |
| 14 |
$ include-webkit $include-webkit: boolean (e.g. $include-webkit:true) True includes Webkit-specific rules |