はじめに

昨年の夏ごろからですが、以下のSass公式サイトに記載があるように、node-sass(LibSass)は公式には2020年10月に非推奨になりました。
今後はDartSassを使用していく形になるのでしょう。
DartSassに乗り換える上で、重要となる記述方法の違いについて解説します。

結論

ざっと変更点をまとめました。

変更点

- @useと@forwardの違いを理解して使い分ける
- @importから@useに書き変えるだけでは使えない
- @useはファイルごとに読み込む必要がある
- @useを使うと名前空間が発生する

DartSassに乗り換える上で、
重要となる記述方法の違いについて解説します。

パーシャルファイルを読み込むときに使っていた@importが廃止され、代わりに@useを使うことになります。

@importルールは2022年10月にサポートが終了する予定です。

例えば、「parts」フォルダにある「_vars.scss」を読み込みたいとき、@use "parts/vars";と指定します。読み込んだ_vars.scssの中にある変数を読み込み先のstyle.scssで使用するには以下のように記述します。

ファイル名は名前空間(namespace)になるので、指定する場所で「名前空間.変数名」と指定します。

globals/_vars.scss

$color-red: #f00;

style.scss

@use "parts/vars";

p {
  color: vars.$color-red;
}

名前空間を指定する方法、
「as hoge」で任意の名前に設定できます。

style.scss

@use "globals/_vars" as v;

p {
  color: v.$color-red;
}

他のファイルの内容を別のファイルにも渡したいというときがあります。
そうしたときに使うのが@forwardです。

中継点ようなものとイメージするとわかりやすいと思います。

globals/_index.scss

@forward "vars";
@forward "mixin";

globals/_vars.scss

$colorBlack: #333;

globals/_mixin.scss

@mixin fontset {
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
}

style.scss

@use 'globals';

p {
  @include globals.fontset;
  color: globals.$colorBlack;
}

globals/_index.scss

@forward "vars";
@forward "mixin";

@use "vars";

a {
  color: vars.$colorBlack;
}

毎回呼び出し時に名前空間を指定するのは面倒な場合は*(アスタリスク)を付ける。

style.scss

@use "globals/vars" as *;

p {
  color: $color-red;
}

組み込み関数からビルトインモジュールの使用については参考・引用から確認してください。