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

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

div {
	$height: 20px !global;
	height: $height;
}
#navbar {
	height: $height;
}

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

div {
	height: 20px; 
}
#navbar {
	height: 20px; 
}

次のコードをコンパイルした結果はどのようになるか説明してください：

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