Oletusmuuttujat SASS:ssa

Joissakin tapauksissa, jos muuttujan arvo ei ole vielä määritetty, mutta sitä on käytettävä koodissa, voimme asettaa sille oletusarvon, jota seuraa !default-merkintä.

On tärkeää huomata, että jos muuttujalle on jo aiemmin annettu arvo, se pysyy ennallaan, mutta jos olemme luoneet uuden tyhjän muuttujan, sille asetetaan oletusarvo.

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

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

Esitetyn koodin kääntämisen tulos on seuraava:

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

Jos asetamme muuttujalle arvon null, !default käsittelee sen arvottomana:

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

#main {
  name: $name;
}

Kääntämisen jälkeen näemme:

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