Default Variables in SASS

In some cases, if the value of a variable is not yet defined, but it needs to be used in the code, we can give it a default value, followed by the !default mark.

It should be noted that if the variable has already been assigned a value before, it will remain the same, but if we create a new empty variable, a default value will be specified for it.

styles.scss$name: "John";
$name: "Bob" !default;
$new_name: "Mark" !default;

#main {
  name: $name;
  new_name: $new_name;
}

The result of compiling the above code will be as follows:

styles.css#main {
  name: "John";
  new_name: "Mark";
}

If we set the variable to null, !default will treat it as having no value:

styles.scss$name: null;
$name: "Bob" !default;

#main {
  name: $name;
}

After compilation we will see:

styles.css#main {
  name: "Bob"; 
}