[SCSS] 불러오기 (@use / @forward)

불러오기 (@use)

scss에서의 '@use'지시어는 다른 scss파일을 현재 파일로 가져와서 사용할 수 있다.

/* @use "layout.scss" */
@use "layout";

 

'@use'는 가져온 파일의 모든 내용을 로컬 스코프로 가져오며, 사용할 때 네임스페이스를 통해 접근해야 한다.

이를 통해 충돌을 방지하고, 코드의 가독성을 높일 수 있다.

/* src/_corners.scss */ 
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

/* style.scss */ 
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

별칭 (Alias)

네임스페이스를 통해 접근하는 특징을 가진 지시어답게 별칭을 사용할 수 있다.

/* style.scss */ 
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

파일명이 길어서 축약어를 쓰고 싶다거나, 파일명이 중복되는 경우 별칭을 줄 수 있을 거 같다.

다만 '*'사용은 공식문서에서 권장하진 않는다.

/* style.scss */ 
@use "src/corners" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}

뭐랄까 네임스페이스가 특징인 녀석인데 굳이 '*'를 쓸 필요는 없다고 생각된다.

비공개 (Private)

정식 명칭은 private members라고 명시되어 있다.

Private member를 사용하게 되면 스타일시트 내에서만 사용 가능한 변수나 믹스인 등을 정의할 수 있고, 외부에서 해당 요소에 접근하지 못하게 할 수 있다.

클래스의 Private을 생각하면 될 거 같다.

변수나 믹스인 이름 앞에 '-' 또는 '_'로 시작하여 정의하면 비공개 설정이 되어 외부에서 접근이 불가능하다.

/* utilities.scss */ 

/* 프라이빗 변수 */ 
$-private-color: #ff0000;

/* 프라이빗 믹스인 */ 
@mixin -private-mixin {
  color: $-private-color;
}

/* 공개 변수 */ 
$public-color: #00ff00;

/* 공개 믹스인 */ 
@mixin public-mixin {
  color: $public-color;
}

@use 'utilities';

body {
  /* public-mixin은 접근 가능 */
  @include utilities.public-mixin;

  /* -private-mixin은 접근 불가 */
  /* @include utilities.-private-mixin; 오류 발생 */
}

이는 모듈의 공용 API와 내부 구현을 분리하여 모듈화 된 스타일시트를 더 깔끔하고 안전하게 관리할 수 있게 도와준다.

---

내보내기 (@forward)

왜 갑자기 불러오기(@use) 지시어를 설명하는 글에서 내보내기(@forward)를 설명하는지 궁금할 것이다.

이유는 @use 와 @forward를 같이 조합하면 좀 더 효과적으로 사용할 수 있기 때문이다.

@forward는 여러 파일을 하나의 인터페이스로 결합하여 내보내는 특징을 가지고 있다.

/* variables.scss */
$primary-color: #333;
$secondary-color: #666;

/* mixins.scss */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* index.scss */
@forward 'variables';
@forward 'mixins';

/* styles.scss */
@use 'index';

body {
  color: index.$primary-color;
  @include index.flex-center;
}

index.scss에 @forward를 사용하여 variables.scss와 mixins.scss의 내용을 다시 내보내어, styles.scss에서 하나의 네임스페이스 index를 통해 모든 멤버에 접근할 수 있게 한다.

접두사 (Prefix)

@forward는 접두사를 추가할 수 있다.

이를 활용하면 좀 더 안전하고 직관적이게 어디서 가져오는지 출처를 알 수 있다.

접두사는 <prefix>-* 이런식으로 작성할 수 있다.

/* variables.scss */
$primary-color: #333;
$secondary-color: #666;

/* mixins.scss */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* index.scss */
@forward 'variables' as var-*;
@forward 'mixins' as mix-*;

/* styles.scss */
@use 'index';

body {
  color: index.var-$primary-color;
  @include index.mix-flex-center;
}

 

가시성 제어(Controlling Visibility)

@forward는 재미있게도 show 와 hide라는 기능이 존재한다.

우선 예제부터 살펴보자.

/* variables.scss */
$primary-color: #333;
$secondary-color: #666;
$background-color: #fff;
$text-color: #000;

/* index.scss */
@forward 'variables' show $primary-color, $text-color;

/* styles.scss */
@use 'index';

body {
  color: index.$primary-color;
  background-color: index.$text-color;
}

/* variables.scss */
$primary-color: #333;
$secondary-color: #666;
$background-color: #fff;
$text-color: #000;

/* index.scss */
@forward 'variables' hide $secondary-color, $background-color;

/* styles.scss */
@use 'index';

body {
  color: index.$primary-color;
  background-color: index.$text-color;
}

각각 show와 hide를 동일한 코드 기반으로 작성해보았다.

나는 처음에 show라는 이름만 보고 도대체 show를 어디다 쓰는거지 싶었는데 '특정한 요소'만 보여주는 역할이였다.

 

다음과 같은 특징을 지녀서 상황에 따라 잘 사용하면 좋을 거 같다.

• show : 지정한 멤버만 외부에 노출하고 나머지는 숨긴다.
• hide : 지정한 멤버만 숨기고 나머지는 외부에 노출한다.

---

@use만으로 @forward 같은 효과를 가질 순 없나?

@use도 불러오는 기능을 가지고 있는데 위 예제처럼 index.scss에서 @use만 사용하면 전부 가져올 수 있지 않을까?

라는 의문에서 시작되어서 찾아보니 @forward를 사용 안 하고 @use를 사용하면 아래와 같이 된다고 한다.

/* index.scss */
@use 'variables' as var;
@use 'mixins' as mix;

/* styles.scss */
@use 'index';

body {
  color: index.var.$primary-color;
  @include index.mix.flex-center;
}

아무래도 @forward는 한 번 결합해서 내보내는 기능이기 때문에 차이가 있을 수밖에 없나 보다.

---

참고

https://sass-lang.com/documentation/at-rules/use/

Sass: @use

https://sass-lang.com/documentation/at-rules/forward/

Sass: @forward