Sass Variables

The first helpful feature is the existence of variables. We can store and reuse values through the code. It's so similar to the programming language that allows to create a variable once and use it multiple times. To declare a variable, we need to put a dollar sign ($) and a variable name, and then we set a colon (:) and give a value.

Note

We can use any naming notation, whether it is kebab case (text-primary-color) or snake case (text_primary_color), or camel case (textPrimaryColor). What is essential is to use the same naming notation throughout the project.

Let's imagine that we need to create a markup in which we have all text color to be #474943 and its font size to be 24px. The sass file would look as follows:

We always keep variables as descriptive as possible, so we can ensure what each variable is responsible for.

The benefit is that it makes it easy to make design changes to the project later. If the text font size or color changes, we can update the value of the $textColor and $textFontSize variables, and the project will be edited as well.