Globalne zmienne wewnątrz selektorów w SASS

Jeśli definiujemy zmienne znajdujące się wewnątrz selektorów, to możemy ich używać tylko w obrębie danego poziomu zagnieżdżenia. Jednakże, jeśli potrzebujemy, aby zmienna była dostępna globalnie, to dopisujemy do jej wartości znacznik !global. Rozważmy przykład:

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

Wynik kompilacji podanego kodu będzie następujący:

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

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