Sass @import 어디감?

J.yeon·2024년 10월 22일

CSS Sass

@import 대신 @use 써야한다고?🤔

2024년 10월 17일, Dart Sass 1.80.0 버전으로 업데이트 되면서부터
Sass의 @import를 사용할 수 없게 되었다.

(이전 버전에서는 사용 가능)

💡 대신 @use와 @forward를 사용

@use와 @forward 는 2019년에 도입된 새로운 모듈 시스템으로
스타일시트의 유지보수를 더 용이하게 하고 오류 발생을 줄이기 위해 설계되었다.

2019년부터 나온 모듈이지만 개인적으로는 @import만 사용했었기에 이번에 중단된게 타격이 큼..

@import 는 왜 사라져야만 했을까?

👎 @import 단점

중복된 CSS 출력: @import를 사용하면 동일한 파일을 여러 번 불러올 수 있는데, 이는 동일한 CSS가 여러 번 중복되어 출력되는 문제를 일으킬 수 있다. (결과적으로 스타일시트 크기가 불필요하게 커질 수 있음)
의존성 관리의 어려움: 명확한 의존성 관리 체계가 부족하다. @use는 각 파일이 명시적으로 이름을 갖고 관리되어 충돌을 방지하고 코드의 유지보수를 쉽게 할 수 있지만, @import는 이를 제공하지 않는다.
전역 네임스페이스 오염: 파일 내에서 정의된 모든 변수와 믹스인 등이 전역 네임스페이스로 확산되어, 변수나 믹스인 간의 이름 충돌이 발생할 수 있다. (복잡한 프로젝트에서는 유지보수와 디버깅이 어려워짐)
성능 문제: 파일을 불러오는 과정에서 성능 저하를 일으킬 수 있다. (css파일이 중복으로 처리될 경우 컴파일 시간이 길어질 수 있음)
모듈성 부족: 모듈화된 구조를 제공하지 않아 코드의 재사용성과 유지보수성을 떨어뜨린다. 반면, @use와 @forward는 모듈 시스템을 제공하여 코드 간 의존성을 명확하게 하고, 파일 간의 상호작용을 관리할 수 있도록 도와준다.

위와 같은 문제를 실제로 겪은 적이 많긴하다...😓

@use란?

@use는 Sass 파일을 다른 파일에 가져오는 방식으로 불러온 파일의 변수, 믹스인, 함수 등이 전역 네임스페이스를 오염시키지 않도록 보호한다. 불러온 파일은 명시적인 네임스페이스를 가지며, 파일 내부의 내용에 접근할 때는 그 네임스페이스를 사용해야한다.

👍 장점

네임스페이스 보호 : 전역 네임스페이스 오염을 방지하기 위해, 가져온 파일의 내용을 기본적으로 네임스페이스 안에 감싸 보호한다.

모듈화 : 각 파일을 독립적인 모듈로 취급하여 코드 관리가 용이하다.

// _variables.scss
$primary-color: purple;

// styles.scss
@use 'variables';

body {
  background-color: variables.$primary-color; // variables 네임스페이스 사용
}

✨@use 'module' as *;

모듈을 불러올 때 해당 모듈의 모든 변수와 믹스인을 네임스페이스 없이 직접 사용할 수 있도록 @use 'module' as * 방식을 사용할 수 있다. 이 방식은 편리하지만 네임스페이스가 사라지기 때문에 이름 충돌의 가능성이 생길 수 있어 주의해야 한다. (권장하는 방식은 아님)

// _variables.scss
$primary-color: purple;
$secondary-color: yellow;

// styles.scss
@use 'variables' as *;

body {
  background-color: $primary-color; // 네임스페이스 없이 사용
}

💡 사용 시 고려 사항

작은 프로젝트나 모듈 간의 충돌 가능성이 낮은 경우에는 as *를 사용해도 무방하지만, 네임스페이스를 사용하지 않으면 코드의 구조가 불명확해질 수 있다.
코드 가독성과 유지보수성을 높이기 위해서는 가능하면 명시적인 네임스페이스를 사용하는 것이 좋다.

편리함과 간결성을 제공하지만, 큰 프로젝트에서는 변수 충돌 문제를 피하기 위해 신중하게 사용해야 한다.

@forward란?

@forward는 모듈 시스템에서 다른 모듈을 내보낼 때 사용된다. 특정 Sass 파일에서 여러 모듈을 @use로 가져와서 하나의 모듈로 통합한 후, 이를 외부에 내보낼 수 있다. 이를 통해 코드의 재사용성을 높이고, 모듈 간 의존성을 명확하게 할 수 있다.

👍 장점

코드 재사용: 다른 모듈을 중계하여 여러 파일을 간편하게 하나로 묶어 관리할 수 있다.

모듈 분리: 복잡한 Sass 파일을 더 작은 모듈로 분리하면서도, 외부에서는 통합된 형태로 사용할 수 있다.

// _variables.scss
$primary-color: purple;
$secondary-color: yellow;

// _mixins.scss
@mixin button($color) {
  background-color: $color;
}

// _index.scss (모듈을 통합하고 내보내는 파일)
@forward 'variables';
@forward 'mixins';

// styles.scss
@use 'index';

button {
  @include index.button(index.$primary-color); // index 네임스페이스 사용
}