Globalne spremenljivke znotraj selektorjev v SASS

Če nastavimo spremenljivke, ki se nahajajo znotraj selektorjev, jih lahko uporabimo samo znotraj določene stopnje gnezdjenja. Vendar, če potrebujemo, da je spremenljivka dostopna globalno, potem k njeni vrednosti dodamo oznako !global. Poglejmo primer:

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

Rezultat kompilacije navedene kode bo naslednji:

styles.cssdiv {
  height: 20px; 
}
#navbar {
  height: 20px; 
}
Задание 1

Povejte, kakšen bo rezultat kompilacije naslednje kode:

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