Globale variable inde i selektorer i SASS

Hvis vi definerer variable, som befinder sig inde i selektorer, kan vi kun bruge dem inden for det definerede indrykningsniveau. Men hvis vi har brug for, at variablen skal være tilgængelig globalt, tilføjer vi mærkatet !global til dens værdi. Lad os se på et eksempel:

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

Resultatet af kompilering af den anførte kode 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;
}