Global Variables Inside Selectors in SASS

If we set variables that are inside selectors, we can use them only within the specified nesting level. However, if we need a variable to be available globally, we append the !global label to its value. Let's look at an example:

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

The result of compiling the above code will be as follows:

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

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