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.
$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:
#main {
name: "John";
new_name: "Mark";
}
If we set the variable to null, !default will treat it as having no value:
$name: null;
$name: "Bob" !default;
#main {
name: $name;
}
After compilation we will see:
#main {
name: "Bob";
}
