[TIF] scss partial 파일과 import

sass 에서 독립된 css로 변경하지 않을 코드 조각을 나타내기 위해선 파일명 앞에 _(underscore) 문자를 붙이면 된다.

 

예를 들어보면...

1. 미리 선언한 변수나 믹스인 집합을 갖는 파일이 있을 때.

// _variables.scss
// 변수들의 집합
$color-basic-light: #fff;
$color-basic-dark: #000;

2. 스타일을 분리하여 관리할 때.

// _commons.scss
* {
  box-sizing: border-box;
}

// _navigation.scss
.navigation {
  width: 100px;
}

 

_ 문자가 붙어 있는 파일은 컴파일 시 css 파일로 출력되지 않는다.

variables.scss, app.scss 파일이 포함된 경로를 컴파일하면 variables.css, app.css 파일이 생성되지만

_variables.scss, app.scss 파일이 포함된 경로를 컴파일하면 app.css 파일만 생성된다.

 

 

이렇게 분리된 파일은 import 를 사용해 가져와 사용할 수 있다.

// app.scss
import "variables";
import "commons";
import "navigation";

 

일반적인 경우 위와 같이 메인이 되는 scss에 나머지 부수적인 scss를 import 하도록 구성하고, 메인이 되는 scss 파일만 컴파일하는 것 같다(아직 많은 코드를 보지 못해 확답은 못하겠고...).

 

여기서 궁금했던 점은,

_ 문자가 붙은 파일을 import 할 때 _ 문자를 제거해도 동일하게 동작한다는 것이었다.

_variables.scss 파일과 variables.scss 두 파일이 존재하는 경우에는 import 할 때 에러가 나는데

sass 개발팀에서 왜 그런 결정을 내렸는지가 의아했다. 아무리 구글링을 해도 그 이유를 명확히 설명하는 페이지를 찾을 수 없었다.

 

정리를 하다가 든 추측은 다음과 같다.

어차피 메인이 되는 scss 파일만 컴파일하고 부수적인 것들은 _ 문자를 붙여 생성한다.

따라서 메인이 되는 scss 파일에 import 된 파일은 모두 _ 문자를 갖게 된다.

그러므로 _ 문자가 붙지 않은 부분 파일은 존재하지 않을 것이므로 _ 문자를 빼도 될 것이다.

 

import 시 .scss 라는 확장자 표시를 제거해도 동작하는 것과 같으면서도 다른 이유로 _ 문자 생략을 허용하는 것 같다.

아직 명확한 이유를 설명한 문서를 찾지 못해 TIF에 남겨둔다.