Globale Variablen innerhalb von Selektoren in SASS

Wenn wir Variablen definieren, die sich innerhalb von Selektoren befinden, können wir sie nur innerhalb der jeweiligen Verschachtelungsebene verwenden. Wenn wir jedoch möchten, dass eine Variable global verfügbar ist, dann fügen wir ihrem Wert die Markierung !global hinzu. Betrachten wir ein Beispiel:

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

Das Ergebnis der Kompilation des angegebenen Codes wird wie folgt aussehen:

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

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