Sass: @import를 넘어 @use와 @forward로 구현하는 현대적인 모듈 아키텍처
프런트엔드 개발의 세계에서 프로젝트는 점점 더 복잡해지고 코드베이스는 확장됨에 따라 효율적인 스타일 관리가 매우 중요해지고 있습니다. 선도적인 CSS 전처리기 중 하나인 Sass는 코드 모듈화 및 유지보수성 향상을 목표로 상당한 변화를 겪었습니다. 이러한 진화의 핵심 단계는 더 이상 사용되지 않는 @import 지시어를 강력하고 유연한 @use 및 @forward로 대체하는 것이었습니다.
오랫동안 @import는 Sass 파일을 포함하는 유일한 방법이었지만, 전역 네임스페이스 오염, 충돌 위험 증가, 코드 중복과 같은 상당한 단점을 가지고 있었습니다. Dart Sass 3.0.0 출시가 임박함에 따라 @import는 공식적으로 더 이상 사용되지 않으며 완전히 제거될 예정이므로, 모든 현대 개발자에게 새로운 모듈형 시스템 채택이 필수적입니다.
@use 지시어: 격리 및 네임스페이스
@use는 Sass의 새로운 모듈형 시스템의 근본적인 요소입니다. 이 지시어는 Sass 파일(모듈)을 로드하고 해당 내용(변수, 믹스인, 함수)을 현재 파일에서 사용할 수 있도록 하지만, 고유한 네임스페이스 내에 격리합니다. 이는 전역 충돌을 방지하고 의존성을 명시적으로 만드는 @import와의 주요 차이점입니다.
기본 사용법:
@use 'path/to/file';기본적으로 네임스페이스 이름은 파일 경로의 마지막 부분에서 밑줄이나 확장자 없이 파생됩니다. 예를 들어, @use '../helpers/colors';를 사용할 때 _colors.scss의 변수와 함수는 colors. 접두사를 통해 접근할 수 있습니다.
// helpers/_colors.scss
$primary: blue;
$secondary: gray;// components/_button.scss
@use '../helpers/colors';
.button {
color: colors.$primary; // "colors" 네임스페이스를 통해 접근
background-color: colors.$secondary;
}as를 사용한 네임스페이스 변경:
편의성이나 명확성을 위해 as 키워드를 사용하여 모듈에 사용자 지정 이름을 할당할 수 있습니다.
@use 'helpers/colors' as myColors;
.button {
color: myColors.$primary; // "myColors"를 통해 접근
}네임스페이스 이름을 지정할 때는 Sass 식별자 규칙을 따라야 합니다.
- 허용: 문자(a-z, A-Z), 숫자(0-9, 단 시작 부분에는 올 수 없음),
camelCase,PascalCase. - 불가: 하이픈(
-), 공백, 특수 문자, 숫자로 시작하는 경우.
Sass 내장 모듈 활용하기
Sass는 수학 연산, 리스트, 맵, 색상, 문자열 작업과 같은 일반적인 작업을 위한 내장 모듈 세트를 제공합니다. 이 모듈들은 sass: 접두사를 사용하여 임포트됩니다.
@use 'sass:math';
@use 'sass:list';
@use 'sass:map';
@use 'sass:color';
@use 'sass:string';내장 모듈의 함수 사용 예시:
$width: math.div(100%, 3); // 나눗셈
$len: list.length((10px, 20px, 30px)); // 리스트 길이
$color: color.adjust(#336699, $lightness: 20%); // 색상 조정
$index: string.index('hello world', 'world'); // 부분 문자열 검색내장 모듈은 일반 모듈과 마찬가지로 해당 함수가 사용되는 모든 파일에서 명시적으로 임포트되어야 한다는 점을 기억하는 것이 중요합니다. 다른 임포트를 통해 상속되지 않습니다.
코드 구성 및 모듈 접근
Sass 모듈형 시스템은 각 SCSS 파일이 시작 부분에 의존성을 명시적으로 선언하는 방식을 권장합니다. 이는 투명성을 보장하고 리팩토링을 단순화합니다. 사용자 지정 파일에 정의된 믹스인과 함수도 네임스페이스를 통해 사용할 수 있습니다.
믹스인 정의 예시:
// helpers/_mixins.scss
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}그리고 사용법:
// components/_card.scss
@use '../helpers/mixins';
.card {
@include mixins.flex-center;
}권장 폴더 구조:
잘 구조화된 Sass 프로젝트는 다음과 같을 수 있습니다.
scss/
helpers/
_colors.scss
_variables.scss
_mixins.scss
components/
_button.scss
_card.scss
pages/
_about-page.scss
template.scss // 메인 빌드 파일여러 모듈을 사용하는 컴포넌트 파일 예시:
// components/_button.scss
@use '../helpers/colors' as myColors;
@use '../helpers/variables';
@use '../helpers/mixins';
.button {
background-color: myColors.$primary;
padding: variables.$spacing-md;
@include mixins.border-radius;
}네임스페이스를 활용한 모듈형 접근 방식의 장점:
- 명확성: 변수나 믹스인이 어느 모듈에서 왔는지 즉시 파악할 수 있어 코드 가독성이 향상됩니다.
- 충돌 없음: 격리된 네임스페이스는 다른 모듈에 동일한 이름의 변수나 믹스인이 있더라도 충돌하지 않도록 보장합니다.
- 쉬운 리팩토링: API가 유지되는 한, 한 모듈의 변경 사항이 다른 모듈에 영향을 미치지 않아 확장 및 수정이 단순해집니다.
- IDE 지원: 최신 개발 환경은 명시적인 네임스페이스를 더 잘 지원하여 정확한 자동 완성 기능을 제공합니다.
- 확장성: 매우 큰 프로젝트에서도 코드베이스를 이해하고 관리하기 쉽게 유지합니다.
@use ... with()를 사용한 모듈 구성
@use ... with() 지시어는 모듈 임포트 시 모듈을 구성하는 강력한 메커니즘을 제공합니다. 이는 모듈을 임포트할 때 !default로 표시된 변수에 새 값을 직접 전달하여 재정의할 수 있도록 합니다.
!default 작동 방식:
!default로 선언된 변수는 이전에 설정되지 않은 경우에만 해당 값을 사용합니다. 값이 이미 설정되어 있다면(예: 다른 파일에서 또는 @use ... with()를 통해), !default는 무시됩니다.
// helpers/_theme.scss
$bg-color: #ffffff !default; // 기본값
$text-color: #333333 !default; // 재정의 가능with()를 사용한 값 재정의:
모듈을 임포트할 때 with() 괄호 안에 !default 변수에 대한 새 값을 전달할 수 있습니다.
// pages/dark-theme.scss
@use '../helpers/theme' with (
$bg-color: #1a1a1a,
$text-color: #f0f0f0
);
body {
background: theme.$bg-color; // #1a1a1a가 됨
color: theme.$text-color; // #f0f0f0이 됨
}with()에 대한 중요 사항:
@use ... with()는 주어진 파일 내에서 특정 모듈을 처음 임포트할 때만 작동합니다. 다른with()값을 사용하여 동일한 모듈을 이후에 임포트하려는 시도는 모두 무시됩니다.- 많은 서드파티 Sass 라이브러리는 설정에
!default를 사용하여with()를 통해 동작을 쉽게 사용자 지정할 수 있도록 합니다.
@forward 지시어: 퍼블릭 API 구축
@forward는 하나 이상의 모듈 내용을 재내보내기하여, 중간 파일을 임포트하는 다른 파일에서 해당 내용을 사용할 수 있도록 하는 지시어입니다. 이는 @forward가 사용된 파일 내에서 해당 내용을 직접 접근할 수 없게 하면서도, 일련의 모듈에 대한 단일 진입점(퍼블릭 API)을 생성하는 데 사용됩니다.
_core.scss를 단일 진입점으로 사용하는 예시:
// _core.scss
@forward 'helpers/colors';
@forward 'helpers/variables';
@forward 'base/fonts';
@forward 'helpers/mixins';이제 각 파일을 개별적으로 임포트하는 대신, 간단히 _core.scss를 임포트할 수 있습니다.
// pages/about-page.scss
@use '../core.scss';
.button {
color: core.$blue; // helpers/colors의 변수
border-radius: core.$border-radius-medium; // helpers/variables의 변수
@include core.flex-center; // helpers/mixins의 믹스인
}_core.scss 접근 방식의 장단점:
- 장점: 사용하는 파일에서의 임포트를 단순화하여 프로젝트 전체에 대한 명확한 API를 생성합니다.
- 단점: 모든 전달된 요소는
core네임스페이스(또는 지정한 네임스페이스)를 사용하므로,_core.scss를 검사하지 않고는 특정 변수나 믹스인의 원본 파일을 파악하기 어려울 수 있습니다.
전달된 모듈의 내부 사용:
만약 _core.scss 파일 자체가 전달된 모듈의 변수나 믹스인을 사용해야 한다면, @use를 사용하여 명시적으로 임포트해야 합니다.
// _core.scss
@forward 'helpers/colors'; // 외부로 전달
@use 'helpers/colors' as c; // _core.scss 내부 사용을 위해
body {
background: c.$bg-color; // @use 덕분에 작동
}고급 @forward 기능:
- 선택적 전달 (
show/hide): 모듈의 어떤 요소를 전달할지 명시적으로 지정할 수 있습니다.
```scss
@forward 'colors' show $primary, $secondary; // 이 변수들만 전달
@forward 'mixins' hide private-mixin; // private-mixin을 제외한 모든 것을 전달
```
- 전달 시
with()를 통한 구성:@use ... with()와 유사하게, 전달되는 모듈의!default변수를 재정의할 수 있습니다.
```scss
// helpers/_theme.scss
$bg-color: #fff !default;
// _index.scss (theme.scss를 전달할 파일)
@forward 'theme' with (
$bg-color: #f0f0f0
);
```
모듈 의존성 관리
Sass 모듈형 시스템에서는 각 파일이 의존성을 명시적으로 선언해야 합니다. 이는 한 모듈(예: _variables.scss)이 다른 모듈(_colors.scss)의 변수를 사용하는 경우에도 적용됩니다. _variables.scss와 _colors.scss가 모두 _core.scss를 통해 전달되더라도, _variables.scss가 _colors.scss의 내용을 사용한다면 여전히 _colors.scss를 명시적으로 임포트해야 합니다.
// _variables.scss
@use 'colors'; // _colors.scss에 대한 명시적 의존성
$button-bg: colors.$primary;이것이 중요한 이유:
- 명확성: 각 파일이 어떤 모듈에 의존하는지 즉시 명확해져 구조 이해를 단순화합니다.
- 신뢰성: 파일이 이동되거나 재구성될 때에도 의존성이 손상되지 않고 이해하기 쉽게 유지됩니다.
- IDE 지원: 정적 분석 도구와 자동 완성 기능이 더 정확하게 작동합니다.
- 리팩토링: 특정 모듈과 변수가 어디에서 사용되는지 쉽게 추적할 수 있습니다.
핵심 요약
- @use 및 @forward는 더 이상 사용되지 않는
@import를 대체하여 Sass에서 진정한 모듈화를 제공합니다. - 네임스페이스는 충돌을 방지하고 의존성을 명시적으로 만들어 확장성을 향상시킵니다.
- @use ... with()는
!default로 표시된 변수를 재정의하여 유연한 모듈 구성을 가능하게 합니다. - @forward는 단일 진입점(퍼블릭 API)을 생성하여 많은 수의 모듈 관리를 단순화하는 데 사용됩니다.
- 각 파일에 의존성을 명시적으로 선언하는 것은 Sass 코드의 유지보수성과 예측 가능성에 매우 중요합니다.
— Editorial Team
아직 댓글이 없습니다.