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:
div {
$height: 20px !global;
height: $height;
}
#navbar {
height: $height;
}
Resultatet av kompilering av den givna koden blir som följer:
div {
height: 20px;
}
#navbar {
height: 20px;
}
Berätta vad resultatet av kompilering av följande kod blir:
#main {
$font-family: Arial !global;
font-family: $font-family;
}
#navbar {
font-family: $font-family;
}