EN
SCSS - variable declaration
0 points
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
1
$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.
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
1
$primary-color: green;
2
3
.element {
4
background-color: $primary-color;
5
}
We can also use variables with more complex expression as their value, for example specify whole border:
xxxxxxxxxx
1
$primary-border: 1px solid red;
2
3
.element {
4
border: $primary-border;
5
}