@import @use 차이점

bisari31·2022년 5월 8일
0

원티드 프리온보딩 코스 중 sass를 사용하게 됐는데,
사용하면서 궁금한 것들을 공부해봤다.

@import @use 차이점

SCSS 파일을 불러오려면 import 하면 된다.
근데 @use 이렇게 생긴 놈을 발견했는데 이건 무엇에 쓰이는 것일까?
import와 use의 공통점은 파일을 import 해 사용할 수 있게 만드는 것인데

예를 들어 color.scss와 size.scss가 있다면 이 둘을 불러온다.

@import './bgColor.scss';
@import './borderColor.scss';

.wrapper {
  width: 400px;
  height: 80px;
  background-color: $RED;
}

여기서 color, size 모두 RED라는 변수가 있다면?
borderColor에서 적용된 RED가 실행될 것이다.

이것을 해결할 수 있는것이 바로 @use이다.

@use './bgColor.scss';
@use './borderColor.scss';

.wrapper {
  width: 400px;
  height: 80px;
  background-color: size.$RED;
}

변수 앞에 파일명을 입력하므로 중복을 피할 수 있다.

Partial

sass에서 독립된 CSS로 변경하지 않을 코드 조각을 나타내기 위해선 파일명 앞에 _(underscore) 문자를 붙이면 된다. 미리 선언한 변수 또는 믹스인 파일의 경우 해당한다.
_문자가 붙어 있는 파일은 컴파일 시 CSS 파일로 출력되지 않는다.

module.scss?

scss의 단점은 클래스 이름을 고유하게 하지 못하는데, module을 이용해 module의 장점과 scss의 기능을 동시에 즐길 수 있다. 대신 import를 js 모듈을 사용하는 방식으로 해야 한다.

import './foo.scss';             // x
import styles from './foo.scss'; // o

0개의 댓글