Globális változók szelektorokon belül SASS-ban

Ha olyan változókat határozunk meg, amelyek szelektorokon belül helyezkednek el, akkor azokat csak a meghatározott beágyazási szinten belül tudjuk használni. Ha azonban szükségünk van rá, hogy a változó globálisan elérhető legyen, akkor hozzáadjuk az értékéhez a !global jelölést. Nézzünk egy példát:

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

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

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

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