Variables globales dans les sélecteurs SASS

Si nous définissons des variables situées à l'intérieur des sélecteurs, nous ne pourrons les utiliser qu'à l'intérieur du niveau d'imbrication spécifié. Cependant, si nous avons besoin qu'une variable soit accessible globalement, nous ajoutons à sa valeur l'indicateur !global. Examinons un exemple :

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

Le résultat de la compilation du code ci-dessus sera le suivant :

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

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