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:

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

O resultado da compilação do código acima será o seguinte:

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

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