[SCSS] 불러오기는 @use를 사용하도록 하자 (@import vs @use)

불러오기 (@import, @use)

SCSS는 스타일시트를 더 효과적으로 관리하고 모듈화 하기 위해 두 가지 주요 지시어를 제공하는데, 그게 바로 @import와 @use 지시어이다.

이 두 지시어는 비슷한 목적을 가지고 있지만 @import는 @use와 비교하여 아주 오래전부터 사용되어온 방식이다.

물론 @import가 오래된 기술이라고 해서 @import말고 @use를 사용해야 한다는 이유는 아니다.

(둘의 차이를 어느정도 알고 싶다면 공식문서를 살펴보거나 내가 작성한 글을 읽어봐도 좋다. @import / @use)

 

공식문서를 본 사람은 알겠지만 애초에 공식문서에서 @import 대신에 @use를 사용하는 것을 권장한다.

⚠️ Heads up!
The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

What’s Wrong With @import?
The @import rule has a number of serious issues:
- @import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.
- Because everything’s global, libraries must add a prefix to all their members to avoid naming collisions.
- @extend rules are also global, which makes it difficult to predict which style rules will be extended.
- Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.
- There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
The new module system and the @use rule address all these problems.

How Do I Migrate?
We’ve written a migration tool that automatically converts most @import-based code to @use-based code in a flash. Just point it at your entrypoints and let it run!

출처 : https://sass-lang.com/documentation/at-rules/import

 

자 뭔가 굉장히 길게 영어로 작성되어 있다.

"Sass 팀은 @import 대신 @use를 사용할 것을 권장하며, 향후 몇 년 안에 @Import 규칙을 제거할 계획입니다. @import 규칙에 여러 심각한 문제가 존재합니다. @use는 이러한 문제를 해결합니다."

라는 게 요지인데, 여러 심각한 문제에 대해 나열되어 있는 것들을 대략적으로 번역해 보면 다음과 같다.

• 모든 변수, 믹스인, 함수들을 글로벌하게 접근할 수 있다. 이는 사람들이나 도구들이 어디에서 정의되어 있는지를 파악하기 매우 어렵게 만든다.
• 그렇기 때문에 이름 충돌을 피하기 위해 모든것들 앞에 접두사를 두어 구분해야만 한다.
• 각 스타일시트는 매번 @import될 때마다 실행되고 CSS가 생성되므로, 컴파일 시간이 늘어나고 출력물이 불필요하게 커진다.
• private member 정의가 불가능하다.

라며 대안으로 @use를 권장하고 있다.

이렇게 문제점에 대해 나열해보니까 확실히 @use에서는 다 해결이 된 문제들이다.

애초에 @use 자체가 @import 지시어의 단점을 해결하기 위해 설계되었다고 생각된다.

 

아마 시간이 좀 지나긴 했어도 아직까지는 @import가 당장 지원종료될 거 같지는 않다.

우선 다음에 @import를 쓰는 경우가 생기면 @use를 쓰도록 하고 만약 당장 마이그레이션 하기를 원한다면 위 인용문에도 나와있는 것처럼 마이그레이션 도구를 지원한다니 관심 있으면 한 번 확인해 보는 것을 추천한다.

https://sass-lang.com/documentation/cli/migrator/

Sass: Migrator