[SCSS] 05. At-Rules -06.@forward

마지막으로 살펴볼 @rule은 @forward이다.

 

@forward

 

@forward는 다른 stylesheet에 선언된 mixin, function, variable등을 로딩하는 기능이다. (어디서 많이 본 내용인데??)

 

@use vs @forward

기본적을 @use나 @forward 모두 다른 stylesheet의 내용을 가져와서 사용하기 위해 사용된다. 그럼 차이점은 무엇일까?

• @use는 사용하는 stylesheet에서 로딩한 다른 모듈을 private 형태로 로딩해서 바로 사용하기 위한 용도이다. 즉 내가 쓰기 위함이다.
• @forward는 로딩한 다른 모듈을 public 하게 묶어놓은 일종의 중간 단계이다. @forward에서는 로드한 모듈을 사용하지도 못한다.  주요 목적은 @use를 편하게 하기 위함이다.

 

위의 예를 살펴보면 06_use_scss에서는 code와 myfunc 두 개를 모두 @use로 로딩해서 사용하고 있다.  하지만 07_forward_use.scss에서는 07_forward.scss 하나만 로드하고 있는데 이게 가능한 이유는 중간단계인 07_forward.scss가 두 개의 stylesheet를 @forward로 로딩하고 있기 때문이다.

@forward로 myfunc와 code를 로딩하고 있는 07_forward.scss에서는 아쉽지만 직점 로드한 내용을 사용할 수는 없다. 만약 사용하려는 경우 다시 @use를 사용해야 한다. 

하지만 "myfunc.scss를 @forward와 @use로 두 번이나 중복 로딩한것은 아닌가?"하고 걱정할 필요는 없다. 이런 경우도 모듈에 대한 중복 로딩은 발생하지 않는다.

 

prefix 사용

아무래도 @forward가 여러 개의 stylesheet를 로딩하다 보니 이름 충돌이 발생할 가능성이 있다. 따라서 로드된 모듈에 일괄적으로 prefix를 선언할 수 있다. 이때는 prefix-* 형태를 사용한다.

다음의 예는 myfunc_scss의 모듈은 mf-*, code는 mc-*라는 prefix를 선언하는 예이다.

/* 07_forward.scss */
@forward "./basic/myfunc.scss" as mf-*;
@forward "./basic/code" as mc-*;
@use "./basic/myfunc.scss";

/* sidebar 구성*/
.sidebar {
  margin-left: myfunc.pow(4, 3) * 1px;
}

 

이제 로드된 라이브러리를 @use에서 사용해보자. 동일한 파일에서 @use를 이용해서 사용할 때는 @forward에 설정한 namespace를 적용할 필요 없다. 하지만 @forward의 결과를 사용하는 stylesheet에서는 prefix를 사용해 주어야 한다.

/* 07_forward_use.scss */
@use "./07_forward.scss" as myforward;

/* sidebar 구성*/
.sidebar {
  margin-left: myforward.mf-pow(4, 3) * 1px;
}

@mixin divcode {
  color: red;
  @include myforward.mc-code
}