Variabile globale în interiorul selectorilor în SASS

Dacă definim variabile care se află în interiorul selectorilor, le vom putea utiliza doar în limitele nivelului de imbricare specificat. Cu toate acestea, dacă avem nevoie ca o variabilă să fie accesibilă global, atunci adăugăm la valoarea ei eticheta !global. Să luăm în considerare un exemplu:

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

Rezultatul compilării codului prezentat va fi următorul:

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

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