Globale variabler inni selektorer i SASS

Hvis vi definerer variabler som befinner seg inni selektorer, kan vi bare bruke dem innenfor det angitte innrykksnivået. Men hvis vi trenger at en variabel skal være tilgjengelig globalt, legger vi til merket !global til verdien dens. La oss se på et eksempel:

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

Resultatet av kompilering av den oppgitte koden vil være som følger:

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

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