Variables globales dentro de selectores en SASS

Si definimos variables que se encuentran dentro de selectores, solo podremos usarlas dentro del nivel de anidamiento especificado. Sin embargo, si necesitamos que una variable sea accesible globalmente, entonces agregamos la etiqueta !global a su valor. Veamos un ejemplo:

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

El resultado de la compilación del código anterior será el siguiente:

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

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