SCSS - variable declaration

2 contributors

7 contributions

0 discussions

0 points

Created by:

654

In this article, we would like to show you how to declare variable in SCSS.

In order to declare variable we need to precede it with $ sign with the following syntax:

$variable-name: expression;

Where:

expression - may be some value, other variable, some calculation or a function call.

Note:

Don't confuse SCSS variables with SASS variables.

Practical examples

In this example, we create primary-color variable with a simple value of green and assign it as a background-color of our element class.

$primary-color: green;

.element {
    background-color: $primary-color;
}

We can also use variables with more complex expression as their value, for example specify whole border:

$primary-border: 1px solid red;

.element {
    border: $primary-border;
}