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;
}