[Scss] @use

1. 배경

scss에서 이제 @import 지원을 하지 않는데 이유는 아래와 같다

• pure css도 @import 를 사용하기 때문에 혼란스러울 수 있음
• 같은 파일을 여러 번 import 하면 코드 충돌과 중복 코드로 인해 컴파일 속도가 느려질 수 있다
• 모든 변수와 함수가 전역으로 관리되기 때문에 같은 이름의 변수나 함수를 사용하면 먼저 선언된 것들이 무시된다
• 어디서 가져온 변수 or 함수인지 직관적으로 알 수가 없다

2. Solution

이를 해결하기 위해 @use를 사용한다

컴파일 중에 단 한 번만 import 되며, @use 를 사용하면 모듈 별로 별도의 namespace를 가지기 때문에 각 변수와 함수는 독립적으로 사용할 수 있다

또한 namespace.[target] 과 같이 사용하기 때문에 어디서 가져온 요소인지 직관적으로 알 수 있다

@use "box";
@use "card" as c;

.big-box {
  background: box.$background-color;
  border: box.getBorder(true);
  width: c.$width;
  height: 200px;
}