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` 키워드로 접두어를 추가할 수 있다.

Mixin은 SCSS 모듈화의 또 다른 축으로, 반복되는 스타일 로직을 함수처럼 재사용 가능한 블록으로 묶어 코드의 생산성과 재활용성을 높인다. 대표적인 활용 패턴은 아이콘을 CSS만으로 그리는 것이다. 이미지 리소스 대신 도형의 기하학적 공식을 mixin으로 정의하면 크기·색상이 바뀌어도 일관된 결과를 보장할 수 있다. X 버튼은 정사각형 대각선 길이 공식(한 변 × √2)으로, 삼각형/화살표는 정삼각형 높이 공식(한 변 × √3 / 2)으로 그릴 수 있다. 이런 방식은 아이콘 크기·컬러의 미세한 불일치(1~2px 오차, 톤업/톤다운)를 원천적으로 방지한다.

텍스트 말줄임(ellipsis) mixin은 게시글 타이틀처럼 고정된 레이아웃 안에서 여러 줄의 말줄임 처리를 매개변수화된 코드로 확장 선언할 수 있게 해준다. 트랜지션 mixin은 `transform`, `opacity`, `left` 등 동적으로 변하는 속성값에 `transition`과 `will-change`를 함께 선언하는 패턴을 통일한다. `will-change`는 브라우저에 곧 변경될 속성을 미리 알려 렌더링을 부드럽게 만드는 역할을 하며, `@each`로 여러 속성을 순회하며 `transition`·`will-change` 값을 한 번에 생성하는 mixin으로 구현할 수 있다. 다만 이런 mixin들은 프로젝트 환경(그림자 효과, 개별 트랜지션 요구 등)에 따라 조정이 필요하며, 모든 상황에 그대로 적용되는 만능 해법은 아니다.

핵심 내용

  • `@import` → `@use` + `@forward` 전환이 현재 Sass 권장 방식
  • @use: 네임스페이스 기반 참조로 이름 충돌 방지, 동일 모듈 중복 컴파일 제거
  • @forward: 여러 모듈 파일을 하나의 진입점으로 묶어 구조화
  • 언더스코어로 시작하는 파일(`_variables.scss`)은 독립 컴파일 대상에서 제외
  • 하이픈·언더스코어로 시작하는 멤버는 외부 노출 차단(프라이빗 스코프)
  • Mixin으로 아이콘 그리기: X 버튼(대각선 = 한 변 × √2), 삼각형/화살표(높이 = 한 변 × √3 / 2) 등 기하 공식을 코드화해 이미지 리소스 없이 일관된 아이콘 생성
  • 말줄임 mixin: 여러 줄 텍스트 말줄임 처리를 매개변수화해 재사용
  • 트랜지션 mixin: `@each`로 속성을 순회하며 `transition` + `will-change`를 함께 선언해 렌더링 성능과 코드 일관성 확보

관련 개념

출처

최종 업데이트: 2026-07-13 | 출처 2개