遅くなりましたが dart-sass 🎯 への乗り換えが完了しました！

ラブグラフのエンジニア、横江です。

ラブグラフでは Node.js のバージョンアップ作業をおこなっていまして、
その一環で node-sass から dart-sass への置き換えをおこないました。

2021年前後に、関連するブログ記事がいくつか出ていたので、すでにご存知の方も多いかもしれませんが、
node-sass の README にはこのように書かれています。

Warning: LibSass and Node Sass are deprecated.
While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features.
Projects that still use it should move onto Dart Sass.

おおまかに言うと、「LibSass のラッパーである node-sass はもう非推奨。メンテナンスリリースは続けるけれど、新たな Sass の機能追加などはおこなわないよ」とのことです。

DartSass の長所

というわけで dart-sass を使うわけです。
LibSass は C/C++ で書かれていたわけですが、 DartSass はその名の通り Dart 🎯 で書かれています。

node-sass は LibSass のラッパーだったわけですが、
dart-sass は Dart を Node.js 向けにトランスパイルすることでライブラリとして使えるようにしているのがいいところですね。
LibSass と node-sass の両方をメンテナンスするというところから脱却できています。

なお、 Dart のトランスパイルの話についてはこちらが詳しいです ↓

https://qiita.com/riafeed/items/e8f36bb68e7f8ed68eaf

dart-sass への乗り換え

dart-sass への乗り換えは、

npm uninstall node-sass
npm install sass

で済むのでカンタンです！

ただし、そのままではエラーや deprecated warning が出たので修正していきました。

Error: トップレベルで @include を使えない

このように書かれている Vue コンポーネントがありました。

<style lang="scss" scoped>
@import "hoge";
// 別ファイル hoge に書かれている設定
// @mixin pc-width {
//   @media screen and (min-width: 1080px) { @content; }
// }

@include pc-width {
  letter-spacing: 1.5px;
}

.box {
  text-align: center;
}
</style>

これが成り立っていたのも不思議なのですが、
当然、CSSはクラスの定義として書かないといけないので

.container {
  @include pc-width {
    letter-spacing: 1.5px;
  }
}

のように直す必要がありました。

Deprecated: 直接的な割り算

$width: 60px;

.box {
  width: $width;
  height: $width / 2;
}

のような記述は deprecated となって、DartSass v2 では削除される予定 とのことです。

こちらは

$width: 60px;

.box {
  width: $width;
  height: calc(#{$width} / 2);
}

のように直してあげます。
calc と変数を併用する場合には #{} で囲ってあげないといけないところに注意ですね！

dart-sass への置き換えが完了！ しかし……

こうして、node-sass から dart-sass への置き換えは完了しました！

一方で、まだ残っているのが Rails 側です。

LibSass のラッパーである sassc-rails を使っているのですが、
これを dartsass-rails に置き換えてあげる必要があります。

こちらはまだ完了していないので、
もしそのときにハマるところがあれば、また記事にしていきたいと思います！

RubySass(Ruby) → LibSass(C/C++) → DartSass(Dart) と、
どんどん実装のための言語が変わっていっているのはおもしろいですし、
Dart にしたことで開発者体験はよくなり、ますます Sass が発展していくでしょうね！

今後の Sass のアップデートも楽しみです。