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 (;) every time we end a statement.

As we are extending the Neptune theme, so far, our theme has no variables set. Ext JS uses the Neptune theme's values until we define our own variables in our theme. For the theme's variables, we have two types:

• Global...