Example
In SCSS variables begin with $ sign, and are set like CSS properties.
$label-color: #eee;
They are only available within nested selectors where they’re defined.
#menu {
$basic-color: #eee;
color: $basic-color;
}
If they’re defined outside of any nested selectors, then they can be used everywhere.
$width: 5em;
#menu {
width: $width;
}
#sidebar {
width: $width;
}
They can also be defined with the !global flag, in which case they’re also available everywhere.
#menu {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
It is important to note that variable names can use hyphens and underscores interchangeably. For example, if you define a variable called $label-width, you can access it as $label_width, and vice versa.
