Globalne promenljive unutar selektora u SASS

Ako definišemo promenljive koje se nalaze unutar selektora, možemo ih koristiti samo unutar datog nivoa ugnježdenja. Međutim, ako nam je potrebno da promenljiva bude dostupna globalno, tada dodajemo oznaku !global na njenoj vrednosti. Razmotrimo primer:

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

Rezultat kompilacije datog koda će biti sledeći:

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

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

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