Променливи по подразбиране в SASS

В някои случаи, ако стойността на променливата все още не е дефинирана, но трябва да се използва в кода, можем да й зададем стойност по подразбиране, след което поставяме маркер !default.

Необходимо е да се отбележи, че ако на променливата вече е било присвоена стойност преди, то тя ще си остане същата, но ако сме създали нова празна променлива, за нея ще бъде зададена стойността по подразбиране.

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

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

Резултатът от компилацията на приведения код ще бъде следният:

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

Ако обаче поставим на променливата стойност null, !default ще я разгледа като неимаща стойност:

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

#main {
  name: $name;
}

След компилация ще видим:

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