SCSS @use module

@use & @forward 사용하기

sunny

2022년 09월 24일 · 0 분 소요

들어가며

규모가 큰 프로젝트를 진행할수록 하나의 파일로 관리하기보다는 여러 개의 파일로 분리하여 작업을 하는데요, scss에서는 기존에 스타일시트를 @import 속성을 이용하여 파일을 연결해서 사용하고 있습니다. 대체로 변수, 자주 사용되는 코드를 각각의 성격에 따라 전체 공통 _variables, _mixin, 혹은 페이지 공통을 추가로 작성하여 연결합니다. 하지만, scss에서 @import 사용을 지양하는 추세로 @use를 새롭게 도입하면서 권장한다는 글을 읽고 사이드 프로젝트에 적용하면서 소개하는 글을 작성하게 되었습니다.

@import

여러 scss 혹은 css 파일을 분리하여 관리하여 불러올 때 사용되는 기능으로 파일 최상단에 선언합니다. scss에서는 @import 하는 파일 이름 앞에 ’_’, 혹은 언더바를 붙일 경우 컴파일되지 않는 모듈 파일이라는 것을 약속으로 하고 있습니다.

@import의 단점

variables, mixins, functions 전역 스코프로 사용되다 보니 이름이 겹칠 가능성이 커서 이름이 중복되지 않도록 작성해야 합니다.
사용된 variables, mixins, functions 어느 파일에서 선언되었는지 추적하기 어렵습니다.

/* _mixin.scss */
@mixin border-card {
  border: 1px solid black;
  border-radius: 12px;
}

/* pageMixin.scss */
@mixin border-card {
  border: 1px solid black;
  border-radius: 8px;
}

/* _box.scss */
@import './style/mixin';
@import './style/pages/pageMixin';

.box {
  @include border-card;
  /* 
    css Output
    border: 1px solid black;
    border-radius: 12px;
    border: 1px solid black;
	  border-radius: 8px;
  */
}

@use 주요 특징

@import 대체되는 문법으로 variables, mixins, functions를 연결하는 용도로 사용되고 @import와 동일하게 스타일시트 최상단에 연결합니다.
@use의 기본 구조는 namespace(파일명)을 기반으로 이용할 수 있습니다. 이를 통해 어느 모듈에서 가져온 코드인지 명확하게 알 수 있습니다.
1. 선언 : @use [namespace]
2. 사용 : @include [namespace].[variable]
3. ‘as’를 이용하여 간결하게 namespace 변경 : @use ‘/style/mixin’ as m;
@use를 여러 번 하더라도 컴파일된 CSS 파일은 한 번만 표시되어 @import에 비해 컴파일 시간이 짧습니다.
’-’ 혹은 하이픈, ’_’ 혹은 언더바로 시작하는 코드는 가져오지 않습니다.

/* _mixin.scss */
@mixin border-card {
  border: 1px solid black;
  border-radius: 12px;
}

/* pageMixin.scss */
@mixin border-card {
  border: 1px solid black;
  border-radius: 8px;
}

@mixin _border-card {
  border: 1px solid black;
  border-radius: 12px;
}

/* _box.scss */
@use './style/mixin';
@use './style/pages/pageMixin';

.box {
  @include pageMixin.border-card;
  /* 
    css Output : 
    border: 1px solid black;
	  border-radius: 8px;
  */
  @include pageMixin._border-card; // ERROR : Undefinded Mixin
}

@forward

@use로 연결하는 파일이 여러 개인 경우, @forward로 모아서 그 해당 파일을 연결해 줄 수 있습니다. 아래 코드처럼 공통으로 사용되는 변수, 색상 코드, 폰트 속성, 믹스인들을 공통 모듈화하여 불러올 수 있습니다. @forward도 @use처럼 각 파일에 ‘as’를 이용해서 모듈에 접두사를 추가한 후 namespace를 지정할 수 있습니다.

/* _commonUtils.scss */
@forward './style/variable';
@forward './style/color';
@forward './style/font';
@forward './style/mixin';

/* _pageUtils.scss */
@forward './style/pages/variable' as vari-*;
@forward './style/pages/color' as col-*;
@forward './style/pages/font' as font-*;
@forward './style/pages/mixin' as mix-*;

/* _box.scss */
@use './style/commonUtils';
@use './style/pageUtils';

.box {
  @include commonUtils.border-card; // commonUnit 내 mixin 이용
}

.box2 {
  @include mix-border-card; // commonUnit 내 mixin 접두사 mix를 이용
}

마치며

scss를 어느 정도 잘 알고 사용하고 있다고 생각했는데, 아직도 새로운 것들이 무궁무진하고 사용하면 편리한 것들이 많습니다.

위 게시글에서 @use, @forward로 작성된 코드나 설명이 잘못된 부분이 있다면 알려 주시면 수정하겠습니다.

읽어주셔서 감사합니다.

참고문서

@use 모듈 시스템