Variáveis globais dentro de seletores em SASS
Se definirmos variáveis que estão
dentro de seletores, só poderemos usá-las
dentro do nível de aninhamento especificado.
No entanto, se precisarmos
que uma variável esteja disponível
globalmente, adicionamos a marca
!global ao seu
valor. Vejamos um exemplo:
div {
$height: 20px !global;
height: $height;
}
#navbar {
height: $height;
}
O resultado da compilação do código acima será o seguinte:
div {
height: 20px;
}
#navbar {
height: 20px;
}
Conte qual será o resultado da compilação do seguinte código:
#main {
$font-family: Arial !global;
font-family: $font-family;
}
#navbar {
font-family: $font-family;
}