@use, @forward 기본 이해

@use 기본 이해

@use는 파셜 파일을 불러와서 사용하는 기능입니다.
네임스페이스, as 키워드, 네임스페이스 제거 등 기본 문법을 이해해 두면, @import 대신 @use를 사용하는 이유와 모듈 시스템의 장점을 실무에서 바로 활용할 수 있습니다.

@use의 기본 개념

@use는 "이 파일을 사용하겠다"는 의미입니다.
다른 파일에서 정의한 변수, 믹스인, 함수를 가져와서 사용할 수 있습니다.

								// _variables.scss
								$color-primary: #0a58ca;
								$color-secondary: #6c757d;

								/* main.scss */
								@use "variables";

								.button {
								  background: variables.$color-primary;
								}

@use "variables"는 _variables.scss 파일을 불러와서 사용한다는 의미입니다.

기본 문법

@use의 기본 문법은 다음과 같습니다.

								@use "파일명";
								// 언더스코어와 확장자는 생략 가능

								/* 파일명: _variables.scss */
								/* 불러오기: @use "variables"; */

								@use "variables";  /* _variables.scss 불러오기 */
								@use "mixins";     /* _mixins.scss 불러오기 */
								@use "buttons";    /* _buttons.scss 불러오기 */

언더스코어(_)와 확장자(.scss)는 생략할 수 있습니다.

네임스페이스 사용

@use로 불러온 변수나 믹스인은 네임스페이스(파일명)를 붙여서 사용해야 합니다.

								// _variables.scss
								$color-primary: #0a58ca;
								$spacing-md: 16px;

								// main.scss
								@use "variables";

								.button {
								  // 네임스페이스 사용
								  background: variables.$color-primary;
								  padding: variables.$spacing-md;
								}

네임스페이스를 사용하면 어떤 파일에서 온 변수인지 명확하고, 변수 이름 충돌을 방지할 수 있습니다.

as 키워드로 네임스페이스 변경

as 키워드를 사용하여 네임스페이스를 변경할 수 있습니다.

								// _variables.scss
								$color-primary: #0a58ca;

								// main.scss
								@use "variables" as vars;  // 네임스페이스를 vars로 변경

								.button {
								  background: vars.$color-primary;  // vars 사용
								}

긴 파일명을 짧은 네임스페이스로 변경하여 사용할 수 있습니다.

네임스페이스 제거

as *를(을) 사용하여 네임스페이스를 제거할 수 있습니다.

								// _variables.scss
								$color-primary: #0a58ca;

								// main.scss
								@use "variables" as *;  // 네임스페이스 제거

								.button {
								  background: $color-primary;  // 네임스페이스 없이 사용
								}

네임스페이스를 제거하면 @import처럼 사용할 수 있지만, 변수 이름 충돌 위험이 있으므로 주의가 필요합니다.

@forward 기본 이해

@forward는 파일을 다른 곳에서 사용할 수 있게 전달하는 기능입니다.
여러 파셜을 하나의 모듈로 묶어서 전달할 때 사용하므로, 변수·믹스인을 카테고리별로 그룹화하거나 라이브러리처럼 제공할 때 특히 유용합니다.

@forward의 기본 개념

@forward는 "이 파일의 내용을 다른 곳에서도 사용할 수 있게 전달한다"는 의미입니다.
중간 파일에서 여러 파셜을 모아서 하나의 모듈로 만들 때 사용합니다.

								// _colors.scss
								$color-primary: #0a58ca;
								$color-secondary: #6c757d;

								// _spacing.scss
								$spacing-md: 16px;
								$spacing-lg: 24px;

								/* _variables.scss (위 두개의 파셜 파일을 묶어 전달하는 역할) */
								@forward "colors";
								@forward "spacing";

								// main.scss
								@use "variables";

								.button {
								  background: variables.$color-primary;  // colors에서
								  padding: variables.$spacing-md;        // spacing에서
								}

_variables.scss가 _colors.scss와 _spacing.scss를 전달하여, main.scss에서는 variables 하나만 불러와도 두 파일의 내용을 모두 사용할 수 있습니다.

@forward의 기본 문법

@forward의 기본 문법은 @use와 동일합니다.

								@forward "파일명";
								// 언더스코어와 확장자는 생략 가능

								// _variables.scss
								@forward "colors";
								@forward "spacing";
								@forward "typography";

								// 여러 파일을 하나로 묶어서 전달

@use와 @forward의 차이

@use와 @forward의 차이점을 명확히 이해하는 것이 중요합니다.
@use는 현재 파일에서 직접 사용하고, @forward는 다른 파일에서 사용할 수 있게 전달하는데, 이 차이를 이해하면 모듈 구조를 설계할 때 어떤 것을 선택할지 명확하게 판단할 수 있습니다.

@use: 사용

@use는 파일을 불러와서 현재 파일에서 사용합니다.

								// _colors.scss
								$color-primary: #0a58ca;

								// _buttons.scss
								@use "color";  // colors 불러와서 사용

								.button {
								  background: color.$color-primary;  // 현재 파일에서 사용
								}

@use는 현재 파일에서만 사용할 수 있게 합니다.

@forward: 전달

@forward는 파일을 다른 곳에서 사용할 수 있게 전달합니다.

								// _colors.scss
								$color-primary: #0a58ca;

								// _variables.scss
								@forward "colors";  // colors를 다른 곳에서 사용할 수 있게 전달

								// main.scss
								@use "variables";  // variables를 사용

								.button {
								  background: variables.$color-primary;  // colors의 변수 사용 가능
								}

@forward는 다른 파일에서도 사용할 수 있게 전달합니다.

차이점 비교

두 기능의 차이를 표로 비교해봅니다.

구분
@use
@forward

의미

사용

전달
사용 범위

현재 파일에서만 사용

다른 파일에서도 사용 가능
용도

파일을 불러와서 직접 사용

여러 파일을 묶어서 전달
사용 예시

main.scss에서 variables 사용

_variables.scss에서 colors, spacing 전달

@use와 @forward 함께 사용

@use와 @forward를 같은 파일에서 함께 사용할 수 있습니다.
@forward로 다른 파일에 전달하면서, @use로 현재 파일에서도 사용하는 예시입니다.

색상 변수 파일 생성
// _colors.scss $color-primary: #0a58ca; $color-secondary: #6c757d;
변수 파일에서 @forward와 @use 함께 사용
@forward로 colors를 전달하고, @use로 현재 파일에서도 사용합니다.

// _variables.scss @forward "colors"; // colors를 다른 파일에서 사용할 수 있게 전달 @use "colors" as *; // colors를 현재 파일에서도 사용 (as *로 네임스페이스 생략) // 현재 파일에서 colors의 변수 사용 $custom-color: $color-primary;
메인 파일에서 variables를 통해 colors 사용
variables를 통해 colors의 변수를 사용할 수 있습니다.

// main.scss @use "variables"; .button { background: variables.$color-primary; // variables를 통해 colors의 변수 사용 }

이렇게 하면 _variables.scss에서 colors의 변수를 사용하면서, 동시에 다른 파일에서도 variables를 통해 colors의 변수에 접근할 수 있습니다.

실제 활용 예시

@use와 @forward를 실제 프로젝트에서 활용하는 예시를 살펴봅니다.

변수 모듈 구성

여러 변수 파일을 하나의 모듈로 묶어서 사용하는 예시입니다.

								// _colors.scss
								$color-primary: #0a58ca;
								$color-secondary: #6c757d;

								// _spacing.scss
								$spacing-md: 16px;
								$spacing-lg: 24px;

								// _typography.scss
								$font-size-base: 16px;
								$font-weight-bold: 700;

								/* _variables.scss (중간 파일) */
								@forward "colors";
								@forward "spacing";
								@forward "typography";

								/* main.scss */
								@use "variables";

								.button {
								  background: variables.$color-primary;
								  padding: variables.$spacing-md;
								  font-size: variables.$font-size-base;
								}

이렇게 하면 여러 변수 파일을 하나의 모듈로 묶어서 관리할 수 있습니다.

컴포넌트 모듈 구성

여러 컴포넌트 파일을 하나의 모듈로 묶어서 사용하는 예시입니다.

								/* _buttons.scss */
								.button { }

								/* _cards.scss */
								.card { }

								/* _forms.scss */
								.input { }

								/* _components.scss (중간 파일) */
								@forward "buttons";
								@forward "cards";
								@forward "forms";

								// main.scss
								@use "variables";
								@use "components";

								// components 모듈의 모든 컴포넌트 사용 가능

@forward의 고급 기능

show와 hide

show와 hide를 사용하여 특정 항목만 전달하거나 제외할 수 있습니다.
show는 지정한 항목만 전달하고, hide는 지정한 항목을 제외하여 나머지를 전달합니다.

								// _variables.scss
								$color-primary: #0a58ca;
								$color-secondary: #6c757d;
								$internal-var: #000000;  // 내부용 변수

								// show
								@forward "variables" show $color-primary, $color-secondary;
								// $color-primary와 $color-secondary만 전달
								// $internal-var는 전달되지 않음

								// hide
								@forward "variables" hide $internal-var;
								// $internal-var를 제외하고 모두 전달

이렇게 하면 내부용 변수나 믹스인을 숨기고, 공개할 항목만 전달할 수 있습니다.

as 키워드로 네임스페이스 변경

@forward에서도 as 키워드를 사용할 수 있습니다.

								// _colors.scss
								$color-primary: #0a58ca;

								// _variables.scss
								@forward "colors" as color-*;
								// colors의 모든 항목을 color- 접두사로 전달

								// main.scss
								@use "variables";

								.button {
								  background: variables.$color-primary-color;  // color- 접두사 추가
								}

@use와 @forward 사용 가이드

@use와 @forward를 언제 어떻게 사용할지 가이드라인을 제시합니다.

@use를 사용하는 경우

다음과 같은 경우에는 @use를 사용합니다:

직접 사용: 파일을 불러와서 현재 파일에서 직접 사용할 때
메인 파일: main.scss 같은 메인 파일에서 파셜을 불러올 때
컴포넌트 파일: 컴포넌트 파일에서 변수나 믹스인을 사용할 때

								// main.scss
								@use "variables";
								@use "mixins";
								@use "buttons";

								// 직접 사용

@forward를 사용하는 경우

다음과 같은 경우에는 @forward를 사용합니다:

모듈 구성: 여러 파일을 하나의 모듈로 묶을 때
중간 파일: 중간 파일에서 여러 파셜을 전달할 때
라이브러리 구성: 라이브러리처럼 여러 파일을 묶어서 제공할 때

								// _variables.scss (중간 파일)
								@forward "colors";
								@forward "spacing";
								@forward "typography";

								// 여러 파일을 하나로 묶어서 전달

정리

@use, @forward 기본 이해에 대해 알아본 내용을 정리합니다.

@use 기본 개념: 파일을 불러와서 사용하는 기능
네임스페이스: 파일명을 네임스페이스로 사용하여 변수 이름 충돌 방지
as 키워드: 네임스페이스 변경 또는 제거 (as *, as 별명)
@forward 기본 개념: 파일을 다른 곳에서 사용할 수 있게 전달하는 기능
@use vs @forward: @use는 사용, @forward는 전달
함께 사용: 같은 파일에서 @use와 @forward를 함께 사용 가능
고급 기능: show, hide, as 키워드로 세밀한 제어 가능
사용 가이드: 직접 사용은 @use, 모듈 구성은 @forward

다음 페이지에서는 기본적인 SCSS 폴더 구조 예시를 자세히 알아봅니다.