불러오기 (@use)
scss에서의 '@use'지시어는 다른 scss파일을 현재 파일로 가져와서 사용할 수 있다.
/* @use "layout.scss" */
@use "layout";
'@use'는 가져온 파일의 모든 내용을 로컬 스코프로 가져오며, 사용할 때 네임스페이스를 통해 접근해야 한다.
이를 통해 충돌을 방지하고, 코드의 가독성을 높일 수 있다.
/* src/_corners.scss */
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
/* style.scss */
@use "src/corners";
.button {
@include corners.rounded;
padding: 5px + corners.$radius;
}
별칭 (Alias)
네임스페이스를 통해 접근하는 특징을 가진 지시어답게 별칭을 사용할 수 있다.
/* style.scss */
@use "src/corners" as c;
.button {
@include c.rounded;
padding: 5px + c.$radius;
}
파일명이 길어서 축약어를 쓰고 싶다거나, 파일명이 중복되는 경우 별칭을 줄 수 있을 거 같다.
다만 '*'사용은 공식문서에서 권장하진 않는다.
/* style.scss */
@use "src/corners" as *;
.button {
@include rounded;
padding: 5px + $radius;
}
뭐랄까 네임스페이스가 특징인 녀석인데 굳이 '*'를 쓸 필요는 없다고 생각된다.
비공개 (Private)
정식 명칭은 private members라고 명시되어 있다.
Private member를 사용하게 되면 스타일시트 내에서만 사용 가능한 변수나 믹스인 등을 정의할 수 있고, 외부에서 해당 요소에 접근하지 못하게 할 수 있다.
클래스의 Private을 생각하면 될 거 같다.
변수나 믹스인 이름 앞에 '-' 또는 '_'로 시작하여 정의하면 비공개 설정이 되어 외부에서 접근이 불가능하다.
/* utilities.scss */
/* 프라이빗 변수 */
$-private-color: #ff0000;
/* 프라이빗 믹스인 */
@mixin -private-mixin {
color: $-private-color;
}
/* 공개 변수 */
$public-color: #00ff00;
/* 공개 믹스인 */
@mixin public-mixin {
color: $public-color;
}
@use 'utilities';
body {
/* public-mixin은 접근 가능 */
@include utilities.public-mixin;
/* -private-mixin은 접근 불가 */
/* @include utilities.-private-mixin; 오류 발생 */
}
이는 모듈의 공용 API와 내부 구현을 분리하여 모듈화 된 스타일시트를 더 깔끔하고 안전하게 관리할 수 있게 도와준다.
내보내기 (@forward)
왜 갑자기 불러오기(@use) 지시어를 설명하는 글에서 내보내기(@forward)를 설명하는지 궁금할 것이다.
이유는 @use 와 @forward를 같이 조합하면 좀 더 효과적으로 사용할 수 있기 때문이다.
@forward는 여러 파일을 하나의 인터페이스로 결합하여 내보내는 특징을 가지고 있다.
/* variables.scss */
$primary-color: #333;
$secondary-color: #666;
/* mixins.scss */
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* index.scss */
@forward 'variables';
@forward 'mixins';
/* styles.scss */
@use 'index';
body {
color: index.$primary-color;
@include index.flex-center;
}
index.scss에 @forward를 사용하여 variables.scss와 mixins.scss의 내용을 다시 내보내어, styles.scss에서 하나의 네임스페이스 index를 통해 모든 멤버에 접근할 수 있게 한다.
접두사 (Prefix)
@forward는 접두사를 추가할 수 있다.
이를 활용하면 좀 더 안전하고 직관적이게 어디서 가져오는지 출처를 알 수 있다.
접두사는 <prefix>-* 이런식으로 작성할 수 있다.
/* variables.scss */
$primary-color: #333;
$secondary-color: #666;
/* mixins.scss */
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* index.scss */
@forward 'variables' as var-*;
@forward 'mixins' as mix-*;
/* styles.scss */
@use 'index';
body {
color: index.var-$primary-color;
@include index.mix-flex-center;
}
가시성 제어(Controlling Visibility)
@forward는 재미있게도 show 와 hide라는 기능이 존재한다.
우선 예제부터 살펴보자.
/* variables.scss */
$primary-color: #333;
$secondary-color: #666;
$background-color: #fff;
$text-color: #000;
/* index.scss */
@forward 'variables' show $primary-color, $text-color;
/* styles.scss */
@use 'index';
body {
color: index.$primary-color;
background-color: index.$text-color;
}
/* variables.scss */
$primary-color: #333;
$secondary-color: #666;
$background-color: #fff;
$text-color: #000;
/* index.scss */
@forward 'variables' hide $secondary-color, $background-color;
/* styles.scss */
@use 'index';
body {
color: index.$primary-color;
background-color: index.$text-color;
}
각각 show와 hide를 동일한 코드 기반으로 작성해보았다.
나는 처음에 show라는 이름만 보고 도대체 show를 어디다 쓰는거지 싶었는데 '특정한 요소'만 보여주는 역할이였다.
다음과 같은 특징을 지녀서 상황에 따라 잘 사용하면 좋을 거 같다.
- show : 지정한 멤버만 외부에 노출하고 나머지는 숨긴다.
- hide : 지정한 멤버만 숨기고 나머지는 외부에 노출한다.
@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는 한 번 결합해서 내보내는 기능이기 때문에 차이가 있을 수밖에 없나 보다.
참고
https://sass-lang.com/documentation/at-rules/use/
Sass: @use
Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead. The @use rule loads mixins, functions, and variables from other Sass stylesheets, and
sass-lang.com
https://sass-lang.com/documentation/at-rules/forward/
Sass: @forward
The @forward rule loads a Sass stylesheet and makes its mixins, functions, and variables) available when your stylesheet is loaded with the @use rule. It makes it possible to organize Sass libraries across many files, while allowing their users to load a s
sass-lang.com
댓글