Variabili globali all'interno dei selettori in SASS

Se definiamo variabili che si trovano all'interno dei selettori, potremo utilizzarle solo all'interno del livello di annidamento specificato. Tuttavia, se abbiamo bisogno che una variabile sia accessibile globalmente, aggiungiamo il flag !global al suo valore. Consideriamo un esempio:

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

Il risultato della compilazione del codice sopra riportato sarà il seguente:

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

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