SASSにおけるセレクター内のグローバル変数

セレクター内で変数を定義する場合、 その変数は定義されたネストレベルの 範囲内でのみ使用できます。ただし、 変数をグローバルに利用可能にしたい場合は、 その値に !global フラグを 追加します。例を見てみましょう：

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

上記のコードをコンパイルした結果は 次のようになります：

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

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