Learning Ext JS - Fourth Edition

Variables

In Ext JS themes, there are a lot of variables that we can change to customize our theme, such as variables for colors, fonts, margins, borders, and many more things. To change and add variables, we need to use the Compass code syntax.

In Compass, we can define variables using the dollar ($) sign. Every time we find a word that starts with the dollar sign, it means that it's a variable that we can read or assign a value to. The following lines of code show some examples of variables:

$background-color: #f3f3f3;
$font-size: 1.5em;
$header-height: 45px;
$custom-text: 'This is a text value';

As shown in the previous code, we can assign a value using a colon (:). We can also use colors, sizes, or texts as values. We need to use a semicolon ...