Globální proměnné uvnitř selektorů v SASS

Pokud nastavujeme proměnné, které se nacházejí uvnitř selektorů, pak je můžeme používat pouze v rámci dané úrovně vnoření. Pokud však potřebujeme, aby byla proměnná dostupná globálně, připíšeme k její hodnotě značku !global. Podívejme se na příklad:

styles.scssdiv {
  $height: 20px !global;
  height: $height;
}
#navbar {
  height: $height;
}

Výsledek kompilace uvedeného kódu bude následující:

styles.cssdiv {
  height: 20px; 
}
#navbar {
  height: 20px; 
}

styles.scss#main {
  $font-family: Arial !global;
  font-family: $font-family;
}
#navbar {
  font-family: $font-family;
}