Globala variabler inom selektorer i SASS

Om vi definierar variabler som finns inuti selektorer kan vi bara använda dem inom den angivna nästningsnivån. Men om vi behöver att variabeln ska vara tillgänglig globalt, så lägger vi till markeringen !global till dess värde. Låt oss titta på ett exempel:

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

Resultatet av kompilering av den givna koden blir som följer:

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

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