Global Variables Inside Selectors in SASS
If we set variables that are inside selectors, we can use them only within the specified nesting level. However, if we need a variable to be available globally, we append the !global label to its value. Let's look at an example:
div {
$height: 20px !global;
height: $height;
}
#navbar {
height: $height;
}
The result of compiling the above code will be as follows:
div {
height: 20px;
}
#navbar {
height: 20px;
}
Tell me what the result of compiling the following code will be:
#main {
$font-family: Arial !global;
font-family: $font-family;
}
#navbar {
font-family: $font-family;
}
