[Edit]

SCSS - variable declaration

1 contributors

2 contributions

0 discussions

0 points

Created by:

624

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:

xxxxxxxxxx
 
$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.

xxxxxxxxxx
 
$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:

xxxxxxxxxx
 
$primary-border: 1px solid red;
​
.element {
    border: $primary-border;
}