LibSassからDartSassに乗り換えよう！

はじめに

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

結論

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

変更点

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

詳細

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

1. @importが廃止、今後は@useを使用

パーシャルファイルを読み込むときに使っていた@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;
}

2. @forwardの基本的な使い方

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

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

@forwardが記載してあるファイルを読み込むと、
その中で@forwardで読み込んでいるファイルの内容を引き継ぐことができます。
(主に変数・mixinを呼び出す場合で使用する)

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

@forwardを使っているファイル内で変数などを呼び出したいときは、
@forwardと@useを併用する必要があります。

globals/_index.scss

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

@use "vars";

a {
  color: vars.$colorBlack;
}

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

style.scss

@use "globals/vars" as *;

p {
  color: $color-red;
}

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

参考・引用

• Sassを使うならDart Sassに乗り換えよう！
• LibSassからDartSassに変更