[SCSS] @import 대신 @use를 쓰자

Yeong·2024년 12월 31일

@import와 @use는 여러 페이지에서 공통으로 사용할 mixin, function, variable 등을 다른 scss 파일에서 끌어올 때 사용한다.
@import는 앞에서 말한 모든 것들을 전역으로 가져오기 때문에, css 파일이 꼬였을 경우에 어디서 잘못되었는지 알기 어렵다. @use는 이 단점을 개선하고자 나온 문법이다.

☘️ @use

// src/_corners.scss
$radius: 3px;
 
@mixin rounded {
  border-radius: $radius;
}
 
// style.scss
@use 'src/corners';
 
.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

@use를 사용하여 mixin, function 및 변수를 불러오고 다른 스타일시트를 결합할 수 있다.
@use를 통해 불러온 모듈은 확장자명을 생략할 수 있는데,
@use 'variables'는 variables.scss, variables.sass, variables.css를 자동으로 불러오게 된다.

@use 'src/corners' as c;
.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}
 
@use 'src/corners' as *;
.button {
  @include rounded;
  padding: 5px + $radius;
}

해당 모듈을 사용하기 위해선 corners.$radius와 같이 네임스페이스를 앞에 사용해야한다.
as *을 통해 네임스페이스를 생략 또는 변경할 수도 있지만 다른 멤버(mixin, function, 변수 등)와 충돌 위험이 있기 때문에 본인이 작성한 스타일시트에 한해서 사용해야한다.

☘️@import

@import 규칙은 모든 것이 전역적이기 때문에 각 파일에서 참조하는 멤버의 출처를 알기 어려우며, 이름 충돌이 일어날 확률이 매우 높기에 @import 규칙의 사용을 권장하지 않는다고 공식 문서에 설명하고 있다. 해당 규칙은 향후 폐지할 계획이며, @import 대신 @use를 사용하면 된다.

☘️@forward

@forward는 여러 파일을 하나의 인터페이스로 결합하여 내보내는 특징을 가지고 있다.

index.scss에 @forward를 사용하여 variables.scss와 mixins.scss의 내용을 다시 내보내어, styles.scss에서 하나의 네임스페이스 index를 통해 모든 멤버에 접근할 수 있게 한다.

1) 각 폴더 내에 _index.scss 파일을 생성한다.
2. _index.scss안에 @forward를 사용하여 해당 폴더 내부에 있는 SCSS를 불러온다.

3. _main.scss 안에 @use를 이용해 불러온다.

😊 한눈에 정리해보자면!!

// index.scss
@forward 'colors';
@forward 'buttons';

// _colors.scss
$primary: blue;
$secondary: green;

// _buttons.scss
@use 'index';

.btn {
	color: colors.$primary;
}

index.scss는 @forward 지시어를 사용하여 _colors.scss와 _buttons.scss를 전달한다.
이를 통해 index.scss만 @use로 로드함으로써 colors와 button 모듈에 모두 접근할 수 있다.

🫧@use만으로 @forward 같은 효과를 가질 순 없나?

@use도 불러오는 기능을 가지고 있는데 index.scss에서 @use만 사용하면 전부 가져올 수 있지 않을까? 라는 의문이 들어 찾아보니 @forward를 사용 안 하고 @use를 사용하면 아래와 같이 된다고 한다.

/* index.scss */
@use 'variables' as var;
@use 'mixins' as mix;

/* styles.scss */
@use 'index';

body {
  color: index.var.$primary-color;
  @include index.mix.flex-center;
}

아무래도 @forward는 한 번 결합해서 내보내는 기능이기 때문에 차이가 있을 수밖에 없나 보다.

🫧@use와 @forward 의 각 특징 정리

@use는 다른 스타일 시트를 현재 스타일시트로 로드하여 사용할 수 있게 한다.
이를 통해, 로드된 스타일 시트의 변수, 믹스인, 함수 등을 사용할 수 있다.
모듈의 네임스페이스를 생성하여 충돌을 방지한다.
@forward는 한 스타일 시트를 다른 스타일 시트로 '전달'한다. 이를 사용함으로써 개발자는 모든 관련 모듈을 개별적으로 로드할 필요없이 하나의 진입점을 통해 필요한 모든 스타일을 가져올 수 있다.

중앙에서 CSS 파일 관리하기(@forward를 이용하여)

src/styles/
├── common.scss
├── variable.scss
└── index.scss

폴더 구조는 이러하며 styles 내에 공통적으로 사용할 scss 파일을 만들고, index.scss에서 한번에 관리한다.

1. 모든 파일을 모은 중앙 관리 파일 생성 (index.scss)

@forward "common";
@forward "animations";
@forward "variable";

2. 각 공통 SCSS 파일 생성

// _variable.scss
// Colors
$color-white: #ffffff !default;
$color-black: #000000 !default;

//common.scss

@mixin flexbox($display: flex, $direction: row, $align: center, $justify: center, $wrap: nowrap) {
  display: $display;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  flex-wrap: $wrap;
}

3. 다른 파일에서 중앙파일 불러와 한번에 사용

@use를 통해 index.scss를 가져오면, _variable.scss와 common.scss의 모든 내용이 포함된다.

// src> app> list> list.scss

@use "../../styles/index" as s; //별칭 생략 시 파일 이름이 네임스페이스가 됨
(예를들어, 아래에서 s.$color가 아닌 index.$color)

.main {
  @include s.flexbox(flex, column, center, center);
  background-color: s.$color-gray-7;
  padding: 1rem;
    h2 {
      color: s.$color-white;
    }
    .food h4 {
      color: s.$color;
    }

}

위와 같이 일일이 하나씩 해당 css를 불러오는 것이 아닌, index.scss만 불러와서 한번에 사용한다.
추후에 공통되는 파일이 늘어나도, index.scss에 해당 파일명만 넣어주면되니 유지보수하기에 용이한 것 같다.

👩‍💻 SCSS에서 파일 이름 앞에 _ 언더바붙이는 경우

_를 붙이는 것은 해당 파일이 단독으로 컴파일되지 않고, 다른 SCSS 파일에 포함될 때만 사용되도록 하는 관례이다.

1. _ 언더바의 의미

언더바가 붙은 파일은 "파트 파일" (partial file)이라고 불리는데, 이러한 파일은 보통 공용 변수, 믹스인, 함수 등 다른 SCSS 파일에서 재사용될 코드 조각을 정의하는 데 사용된다.

예를 들어, _variables.scss라는 파일이 있다면, 이 파일은 변수들만 정의하고 다른 SCSS 파일에서 @import하여 사용하는 용도로 사용된다.

2. _가 붙는 경우와 안 붙는 경우의 차이

_가 붙은 경우 (ex. variables.scss): 단독으로 컴파일되지 않음.
컴파일러는 가 붙은 파일을 최종 CSS로 변환하지 않는다.
다른 SCSS 파일에 포함해서 사용해야 함!
_가 붙지 않은 경우 (ex. variables.scss):
단독으로 컴파일되고, 컴파일러가 이 파일을 개별적으로 읽어 최종 CSS 파일로 변환한다.