SCSS 모듈 시스템

SCSS(Sass)는 대규모 프로젝트에서 스타일시트를 여러 파일로 분리해 관리한다. 기존에는 `@import`로 파일을 연결했지만, 전역 스코프 문제와 중복 컴파일 이슈로 인해 최신 Sass에서는 `@use`와 `@forward`로 대체할 것을 권장하고 있다.

@import의 단점은 두 가지다. 첫째, 변수·믹스인·함수가 전역 스코프에서 동작해 이름 충돌 위험이 높다. 둘째, 여러 파일에서 같은 모듈을 import할 경우 어디서 선언되었는지 추적하기 어렵고 중복 처리가 발생한다.

@use는 `@import`의 후계 문법으로 파일 최상단에 선언한다. 핵심 특징은 네임스페이스(Namespace) 기반 참조다. `@use 'colors'`로 선언하면 `colors.$primary`처럼 파일명을 접두어로 붙여 변수를 사용한다. `as` 키워드로 네임스페이스를 단축하거나 `*`로 제거할 수도 있다. 여러 파일에서 동일한 모듈을 `@use`해도 CSS로 한 번만 컴파일되어 성능이 향상된다. 하이픈이나 언더스코어로 시작하는 멤버는 외부에서 접근할 수 없다(프라이빗 처리).

@forward는 여러 파일을 하나의 진입점으로 묶을 때 사용한다. 공통 변수, 색상, 폰트, 믹스인을 하나의 `_index.scss`에 `@forward`로 모아두면, 사용하는 쪽에서 단 하나의 `@use`만으로 모든 멤버에 접근할 수 있다. `@use`와 마찬가지로 `as` 키워드로 접두어를 추가할 수 있다.

핵심 내용

• `@import` → `@use` + `@forward` 전환이 현재 Sass 권장 방식
• @use: 네임스페이스 기반 참조로 이름 충돌 방지, 동일 모듈 중복 컴파일 제거
• @forward: 여러 모듈 파일을 하나의 진입점으로 묶어 구조화
• 언더스코어로 시작하는 파일(`_variables.scss`)은 독립 컴파일 대상에서 제외
• 하이픈·언더스코어로 시작하는 멤버는 외부 노출 차단(프라이빗 스코프)

관련 개념

• 웹 아키텍처 — 프론트엔드 빌드 시스템과 스타일 모듈 관리
• 디자인 시스템 — 토큰·변수·믹스인의 모듈화는 디자인 시스템 코드 구조의 기반

출처

• SCSS @use module — 2022-11-24, seonju.lee