Globale variabelen binnen selectors in SASS
Als we variabelen definiëren die zich bevinden
binnen selectors, kunnen we ze alleen gebruiken
binnen het geneste niveau waar ze zijn gedefinieerd.
Als we echter nodig hebben dat een variabele
globaal beschikbaar is, voegen we het label
!global toe aan de waarde.
Laten we een voorbeeld bekijken:
div {
$height: 20px !global;
height: $height;
}
#navbar {
height: $height;
}
Het resultaat van de compilatie van de gegeven code zal als volgt zijn:
div {
height: 20px;
}
#navbar {
height: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
#main {
$font-family: Arial !global;
font-family: $font-family;
}
#navbar {
font-family: $font-family;
}
