실무에서는 수천 줄의 SCSS를 한 파일에 작성하지 않습니다. 변수, 믹스인, 리셋, 레이아웃, 컴포넌트 별로 파일을 쪼개서 관리합니다. 파일명 앞에 언더스코어(_)를 붙이면 독립적인 CSS 파일로 컴파일되지 않는 '부분 파일(Partial)'이 됩니다.
메인 파일인 style.scss에서 @use 키워드를 사용해 조각난 파일들을 하나로 불러와 조립합니다. (과거에는 @import를 썼지만, 이름 충돌 문제로 현재는 @use를 권장합니다.)
| 폴더명 (7-1 Pattern 예시) | 포함되는 파일 (Partials) | 역할 설명 |
|---|---|---|
| abstracts/ | _variables.scss, _mixins.scss |
실제 CSS 코드는 출력하지 않고 변수와 믹스인만 정의 |
| base/ | _reset.scss, _typography.scss |
HTML 태그 기본 스타일 및 웹 폰트 초기화 |
| components/ | _buttons.scss, _cards.scss |
재사용 가능한 UI 컴포넌트 단위의 스타일 |
| layout/ | _header.scss, _footer.scss |
사이트의 전반적인 골격과 레이아웃 스타일 |
파일명 앞에 언더스코어(_)를 붙여 부분 파일(Partial)을 만들고, 메인 파일에서 @use로 불러옵니다. 불러올 때 자동으로 네임스페이스가 생성되며, as 키워드를 사용해 네임스페이스를 원하는 대로 변경할 수 있습니다.
$primary: #4f46e5;
$font-stack: 'Helvetica Neue', sans-serif;
@mixin box-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
// 불러올 때 확장자(.scss)와 언더스코어(_)는 생략 가능합니다.
@use 'variables' as v;
@use 'mixins' as m;
.module-test {
// 네임스페이스(v., m.)를 통해 접근하므로 이름 충돌이 절대 발생하지 않습니다!
font-family: v.$font-stack;
color: v.$primary;
@include m.box-shadow;
padding: 20px;
border-radius: 8px;
}
.module-test {
font-family: "Helvetica Neue", sans-serif;
color: #4f46e5;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
}
파일이 많아지면 @use를 수십 번 작성해야 해서 불편할 수 있습니다. 이럴 때 @forward를 사용하면 여러 부분 파일들을 하나의 진입점(Entry point) 파일로 묶어서 다른 곳에 일괄 내보낼 수 있습니다. (JavaScript의 export * from '...' 패턴과 유사합니다.)
/* 여러 파일을 묶어서 내보냅니다. */
@forward 'variables';
@forward 'mixins';
@forward 'functions';
/* 이제 main.scss에서는 abstracts 폴더만 한 번 @use로 불러오면
모든 변수와 믹스인을 한꺼번에 사용할 수 있습니다! */
Sass 공식 문서에 따르면 @import는 전역 스코프 오염과 중복 컴파일로 인한 성능 문제 때문에 조만간 완전히 폐기될 예정입니다. 새로 작성하는 모든 프로젝트에서는 반드시 @use를 사용해야 하며, 네임스페이스를 통해 명시적으로 변수와 믹스인에 접근해야 합니다.