Variablat globale brenda selektorëve në SASS

Nëse përcaktojmë variabla që ndodhen brenda selektorëve, atëherë mund t'i përdorim ato vetëm brenda nivelit të caktuar të folezimit. Megjithatë, nëse kemi nevojë që një variabël të jetë e disponueshme globalisht, atëherë shtojmë në vlerën e saj etiketën !global. Le të shqyrtojmë një shembull:

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

Rezultati i kompilimit të kodit të paraqitur do të jetë si më poshtë:

styles.cssdiv {
  height: 20px; 
}
#navbar {
  height: 20px; 
}
Задание 1

Tregoni, çfarë do të jetë rezultati i kompilimit të kodit të mëposhtëm:

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