1. @forward란?

SCSS에서 @forward는 다른 SCSS 파일에 있는 변수, 믹스인, 함수 등을 그대로 “재전달”하는 기능입니다.

  • @use → 직접 가져다 쓰는 것
  • @forward → 다른 파일에서 사용할 수 있도록 재전달

2. 왜 필요한가?

프로젝트 구조 예시:

/styles/
  _colors.scss
  _fonts.scss
  _mixins.scss
  index.scss

각 파일을 전부 @use로 개별 import 하기 불편하므로,
index.scss에서 다음처럼 한 번에 정리합니다.

@forward 'colors';
@forward 'fonts';
@forward 'mixins';

사용할 때:

@use 'styles' as *;

3. @use vs @forward 비교

기능 @use @forward
목적 직접 가져와서 사용 다른 곳에서 사용하도록 재전달
사용 위치 실제 스타일 파일 디자인 토큰, 라이브러리 집합 파일
네임스페이스 기본 필요 필요 없음
사용 케이스 컴포넌트, 페이지 토큰, 공통 리소스 집합

4. 기본 사용법

예제 1: 단순 forward

_colors.scss

$primary: #ff379c;
$secondary: #222;

_index.scss

@forward 'colors';

사용:

@use 'index' as *;

.button {
  color: $primary;
}

5. prefix 붙이는 방법

@forward 'colors' as color-*;

사용:

@use 'index' as *;

.title {
  color: $color-primary;
}

6. hide로 특정 변수 숨기기

@forward 'colors' hide $privateColor;

외부에서 $privateColor 접근 불가.

7. show로 공개할 항목 제한

@forward 'colors' show $primary, $secondary;

지정된 항목만 전달됨.

8. with로 기본 변수 재정의(override)

_spacing.scss

$padding-base: 16px !default;

forward하면서 재설정:

@forward 'spacing' with (
  $padding-base: 24px
);

9. 실전 패턴 예시

디자인 시스템 aggregator 패턴

tokens/index.scss

@forward 'colors';
@forward 'fonts';
@forward 'spacing';

사용:

@use '@/styles/tokens' as *;

body {
  color: $primary;
}

prefix 충돌 방지 패턴

@forward 'colors' as c-*;
@forward 'fonts' as f-*;
@forward 'spacing' as s-*;

사용:

@use '@/styles/tokens' as *;

.title {
  color: $c-primary;
}

10. 요약

  • @forward는 SCSS 파일을 묶어 외부로 재전달
  • 디자인 시스템, 공통 변수/믹스인 관리에 최적
  • 주요 기능: as, hide, show, with