sass Variables SCSS


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.