SASS – Lesson 3 : Variables

A variable can hold several types of information: a color code, a calculation, or even a true/false value (boolean).

To use a variable, you must declare it with the “$” sign followed by its name and value: $background: rgba(black, .2);

Once declared, the variable can be called anywhere in the document, even if it is defined in a file imported using @import.

Generated CSS code :

The use of a variable has no limit; you can call it as many times as you wish. It is also possible to use a variable in a mixin, a function, or loops.

Use case of a boolean variable in SASS

In the SASS – Lesson 2 post, we explained that it’s possible to organize your CSS in a modular way.
Thanks to boolean variables, you can activate or deactivate a partial or a portion of SASS code.

With $use-slider set to “false”, the code inside the condition will not be compiled.