Alapértelmezett változók az SASS-ban

Egyes esetekben, ha egy változó értéke még nincs meghatározva, de a kódban használni kell, beállíthatunk neki alapértelmezett értéket, mely után a !default jelölést helyezzük el.

Fontos megjegyezni, hogy ha a változónak korábban már értéket adtunk, akkor az megmarad, viszont ha egy új, üres változót hoztunk létre, akkor az számára lesz beállítva az alapértelmezett érték.

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

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

A megadott kód fordításának eredménye a következő lesz:

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

Ha viszont a változó értékét null-ra állítjuk, a !default úgy kezeli, mintha nem lenne értéke:

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

#main {
  name: $name;
}

A fordítás után ezt látjuk:

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