@import와 @use, @forward

@import와 @use

@import와 @use는 여러 페이지에서 공통으로 사용할 mixin, function, variable 등을 다른 scss 파일에서 끌어올 때 사용한다.

@import는 앞에서 말한 모든 것들을 전역으로 가져오기 때문에, css 파일이 꼬였을 경우에 어디서 잘못되었는지 알기 어렵다. @use는 이 단점을 개선하고자 나온 문법이다.

 

@import와 @use는 어떻게 다른가?

@import와 마찬가지로 @use는 스타일시트 내에서 좀더 세분화하여 세분화하여 끌어올 수 있다.

_mixin.scss 파일을 @import와 @use를 사용하여 불러온다고 가정해보자.

(vscode의 live sass compiler를 사용하여 컴파일 하였는데, 업데이트 되지 않아 @use의 결과는 확인할 수 없었다. 하지만 이렇게 사용하는 거라고 하니 우선 참고해보자.)

// _mixin.scss

@mixin box($w, $h) {
    width: $w;
    height: $h;
    background-color: blue;
}

@import 사용

// use.scss

@import 'mixin';

.box {
    @include box(200px, 200px);
    background-color: coral;
}

@use 사용

// use.scss

@use 'mixin';

.box {
    @include mixin.box(200px, 200px);
    background-color: coral;
}

이렇게 어떤 파일에서 가져왔는지 명시해주는 것!

 

 

모든 변수와 mixin을 컴파일 하지 않고, 원하는 mixin만 끌어올 수 있다.

하지만 이것이 불편하게 느낄 수도 있다는 생각을 하는 사람이 분명 있을 수 있다.

나는 이 파일에 @use한 파일에서 @use한 파일 안에 있는 @mixin이 필요한데.. 그럼 이걸 어떻게 끌어오라고 하는거지?

 

이것을 보완하려고 나온 것이 @forward 라고 하는데..!

이렇게 @forward로 다른파일에 추가할 파일을 입력하면 다른 파일에서도 사용 가능하다고 한다.

 

 

참고 및 출처:

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

www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/