SASS에서 파일 임포트하기

SASS 파일 작업 시, .scss 문서에서 코드를 가져오되, .css 확장자를 가진 복제본을 생성하지 않고, 즉 해당 파일의 일부를 임포트해야 하는 경우가 있습니다.

예를 들어, 다음과 같은 코드가 포함된 navbar.scss 파일이 있다고 가정해 보겠습니다:

.active {
	color: red;
}

이러한 종류의 임포트를 수행하려면 먼저 파일 이름 앞에 밑줄을 추가해야 합니다. 예: _navbar.scss. 그런 다음 다른 파일 style.scss에서 @import 지시자를 작성하되, 임포트하는 파일 이름에서는 밑줄과 파일 확장자를 명시하지 않습니다:

@import "navbar";

컴파일 후 style.css에서 _navbar.scss 파일의 코드가 임포트된 것을 확인할 수 있습니다:

.active {
	color: red; 
}

다음 내용이 포함된 main.scss 파일을 생성하세요:

.block-content {
	padding: 10px;
	margin-left: auto;
	width: 600px;
	font-size: 14px;
}

그런 다음 해당 코드 조각을 styles.scss 파일로 임포트하고 styles.css로 컴파일하세요.