SASS에서 파일 임포트하기

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

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

navbar.scss.active {
  color: red;
}

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

style.scss@import "navbar";

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

style.css.active {
  color: red; 
}

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