Example
Just as in Sass, SCSS variables are used to store a value which will be used multiple times throughout a SCSS document.
Variables are mostly used to store frequently-used property values (such as fonts and colors), but can be used for any value of any property.
SCSS uses the $ symbol to declare a variable.
$font-stack: Helvetica, sans-serif;
$primary-color: #000000;
body {
font-family: $font-stack;
color: $primary-color;
}
You can use !default when declaring a variable if you want to assign a new value to this variable only if it hasn't been assigned yet:
$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green; // And now it's green.
