Dart Sass: @use, @forward, scss:math, variable syntax 적용방법

SASS는 Ruby 언어로 처음 만들어져, LibSass -> Node-Sass로 발전하면서 지난 몇년 간, UI엔지니어 사이에서 큰 사랑을 받았습니다.
현재는, Dart Sass라는 이름으로 설치 후 사용 가능하며, 조만간 Node-Sass에서 사용했던 문법들이 depreciated 된다고 공지 되었습니다.

The Sass team discourages the continued use of the @import rule.
Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely.
Prefer the @use rule instead.

저 또한, 최근에 새로운 저장소에서 작업환경을 구축하면서, 기존에 사용했던 문법들을 Dart Sass에 맞게 수정을 하였는데요,
새롭게 추가된 문법 중에서 중요한 몇 가지를 공유하려고 합니다.

1. @use

지금까지는 기본적인 스타일 파일 여러개를 불러올 때, @import 를 주로 사용했습니다. Dart Sass에서는 @use를 사용하는데요,
그 이유로는 네임스페이스를 생성해서 기존에 전역으로 사용되었던 문제점을 보완할 수 있기 때문입니다. @use를 사용해서 가져온 스타일시트를 모듈(modules)이라고 부릅니다.

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

@use를 사용해서 미리 선언해 놓은 변수, 믹스인, 함수를 가져올 수 있으며, <namespace>.변수/믹스인/함수로 선언된 값에 접근할 수 있습니다.
네임스페이스 값은 경로 as <namespace> 문법으로 사용 환경에 맞게 바꿀 수 있습니다. 만약, 네임스페이스없이 모듈을 불러와 사용하고 싶으면,
*를 선언하면 되지만, 꼭 필요한 경우가 아니면 추천하지는 않습니다.

// 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;
}

2. @forward

@forward를 사용하면 반복적인 @use의 사용을 줄일 수 있다는 이점이 있습니다. 두 문법의 차이점은, 아래 코드를 기준으로 볼 때 @use는 불러온 스타일을 현재 파일(styles.scss)에서
바로 사용하기 위해 필요한 문법이며, @forward는 여러 스타일을 bootstrap.scss로 불러와서 이를 다시, @use를 통해 style.scss에서 사용하는데 그 목적이 있습니다.

// colors.scss
$red: red;

// fonts.scss
$font-size: 1.5rem;

// bootstrap.scss
@forward "colors";
@forward "fonts";

// styles.scss
@use "bootstrap";

.card {
  font-size: bootstrap.$font-size;
  color: bootstrap.$red;
}

3. scss:math & CSS variable syntax

node-sass에서 dart-sass로 전환할 때, 가장 많은 오류가 나는 곳이 바로 효율적인 스타일 관리를 위해 만들어 놓은 다양한 @mixin 구문 입니다.
특별히, 스타일 계산을 위해 사용한 나눗셈(/)기호 사용 시, 오류가 발생하는데요, dart-sass에서는 scss:math를 사용해서 연산을 해야 합니다.

// styles.scss
@use "sass:math";

$base-border-radius: 20px;

// node-sass 버전
.card {
    border-radius: $base-border-radius / 4;
}

// dart-sass 버전
.card {
    border-radius: math.div($base-border-radius, 4)
}

scss:math는 나눗셈 이외에도 계산을 돕기 위한 다양한 수식을 제공합니다.

math.ceil(4); // 4
math.ceil(4.2); // 5
math.ceil(4.9); // 5

math.floor(4); // 4
math.floor(4.2); // 4
math.floor(4.9); // 4

math.round(4); // 4
math.round(4.2); // 4
math.round(4.9); // 5

math.abs(10px); // 10px
math.abs(-10px); // 10px

math.max(1px, 4px); // 4px
$widths: 50px, 30px, 100px;
math.max($widths...); // 100px

math.min(1px, 4px); // 1px
$widths: 50px, 30px, 100px;
math.min($widths...); // 30px

sass:math와 함께, dart-sass를 적용하면서 함께 수정한 부분이 기존에 사용하던 CSS variable syntax입니다.
커스텀으로 선언한 변수를 오류없이 사용하기 위해서는 #{}내부에 선언을 해야 합니다.

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}

최신 dart-sass 문법을 적용하기 위해서 공식 사이트에서는 마이그레이션을 권장하고 있으며,
아래 링크에서 이와관련하여 가이드를 제공하고 있으니, 참고하시면 좋을 것 같습니다!

https://sass-lang.com/documentation/cli/migrator