Sass features
In this section, we will take a look at some of the most used features of Sass. This will just be a brief introduction to get familiar with Sass code and not a detailed guide, as we’re not going to write much Sass code during the course of this book.
Variables
Sass variables can be used to store any kind of CSS value that you want to reuse. Variables are, for example, helpful to use for colors when you need to implement a consistent color scheme across many components and potentially need to change one or more of the colors later in the process. This can then be done simply by updating the value of the variable. To create a variable, you simply assign a value to a name that begins with the $ symbol. Here is an example of creating and using a variable:
$color-primary: blue;
.button {
background-color: $color-primary;
}
When the Sass file is processed, it takes the values of the variables and places them in the regular CSS. The generated...
