SASS의 중첩 임포트

일반적으로 @import는 문서의 시작 부분에서 사용되지만, SASS 전처리기는 원하는 파일의 어느 부분에나, 심지어는 선택자 내부에 파일을 임포트하는 것을 허용합니다.

다음 예제를 살펴보겠습니다:

.active {
	color: blue;
}

이를 style.scss 파일로 임포트해 보겠습니다:

div {
	@import "main";
}

이제 컴파일 결과를 살펴보겠습니다:

div .active {
	color: blue; 
}

다음 내용으로 navbar.scss 파일을 생성하세요:

.link {
	color: red;
	font-size: 12px;
}

그런 다음 이 코드 조각을 styles.scss 파일의 #main 블록으로 임포트하고 styles.css로 컴파일하세요.