SCSS 활용 팁 9. @import VS @use 차이점 알고 쓰기

SCSS에서 @import와 @use는 모두 다른 스타일시트를 가져오는데 사용되지만 용도와 동작 방식이 다릅니다. 요즘은 @use를 더 권장한다고 하는데요. @import와 @use의 차이점이 뭔지, @use를 권장하는 이유는 무엇인지 알아보겠습니다.

 

@import 

기존의 SCSS부터 스타일시트를 가져올 때 사용하던 방식입니다. @import로 스타일 시트를 가져오면 모든 변수, 믹스인, 함수를 전역으로 추가합니다. 또 같은 파일을 여러번 불러올 수 있어 성능 문제나 충돌을 일으킬 수 있습니다.

 

@use

@use는 모듈 시스템을 기반으로 스타일 시트를 가져오며 자체적인 로컬 스코프를 가집니다. 또 독자적인 네임스페이스를 사용하기 때문에 충돌을 방지할 수 있습니다. @import와는 달리 같은 파일을 여러번 가져와도 한번만 로드됩니다.

// base.scss
$primary-color: blue;

body {
  color: $primary-color;
}

// main.scss
@use 'base';

h1 {
  color: base.$primary-color; // base 모듈의 $primary-color 사용
}

 

위의 예시처럼 @use로 스타일시트를 불러오면, 파일 이름을 접두사로 하는 네임스페이스를 사용해야만 변수나 믹스인에 접근할 수 있습니다. 어디서나 간편하게 변수를 쓸 수 있는 @import보다는 살짝 까다로운 느낌을 주네요. 

그래서 네임스페이스를 보다 간단하게 이용할 수 있도록, 별칭을 지정할 수 있답니다. 

@use 'base' as b; // base를 b로 줄여서 사용
h1 {
  color: b.$primary-color;
}

이렇게, 파일명 대신 'b'라는 별칭을 붙여서, 접두사를 간략하게 줄여보았습니다. 이것도 복잡하다면, 아예 전역스코프처럼 접두사 없이 사용할 수도 있습니다.

@use 'base' as *; // 전역 스코프처럼 사용
h1 {
  color: $primary-color;
}

이렇게 별칭을 '*'로 붙이면, 접두사 없이 간단하게 사용할 수 있습니다 (권장하진 않습니다). 

@import와의 작별을 준비해야 할 때

현재의 scss에서 @use를 권장하는 이유를 간단히 설명하자면, 더 나은 모듈화, 충돌방지, 효율적인 코드관리가 가능하기 때문입니다. @import처럼 전역으로 변수,함수,믹스인이 노출되면, 이름이 중복되는경우 충돌이 발생할 가능성이 높습니다. @use에서 네임스페이스를 사용하는 이유가 이런 충돌을 방지하기 위함입니다. 또한 같은 파일을 한번만 로드하기 때문에 불필요한 중복 로드를 피할 수 있고, 빌드 성능이 개선됩니다. 

Sass팀 또한 @import를 더이상 개선하지 않고, @use를 SCSS의 공식적 모듈 시스템이라 발표하기도 했습니다. 장기적으로 보아 @import는 사라질 가능성이 있다는 소리입니다.