Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass（いまここ）

Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しました。サイト上でも棺桶になってます。

LibSassは、C / C ++でのSassの実装であり、多くの異なる言語に簡単に統合できるように設計されていますが、（node-sassなど）いろいろあり結局LibSassは2020年10月に非推奨となり、今後は新機能の追加が行われないことが決定しています。サポートは行われるようですが移行したほうがよさそうです。@import機能は2022年にはサポート終了（@importはDartSassでは@useに置き換わる）

Dart SassはSassの主要な実装です。現在のデフォルトなので新しい機能を取得できます。インストールは簡単で、純粋なJavaScriptにコンパイルされるため、最新のWeb開発ワークフローに簡単に統合できます。

• Sass: Syntactically Awesome Style Sheets

準備

まずnode-sassをアンインストールします。

$ npm remove node-sass

インストール

sassとsass-migratorをインストールします。sass-migratorはnode-sassなどの古い記述をDartSassで使えるように変換するツールです。

$ npm i -D sass sass-migrator

移行

マイグレーション、出力ファイルを選択するだけで紐付いているscssファイルが変換されます。他オプションがありますが詳しくは公式サイトでご確認ください。

• Sass: Migrator

$ sass-migrator --migrate-deps module ./src/sass/style.scss

移行した後はsassで作業すると思うのですが規則などが変わっているので公式サイト見ながら作業した方が良いかと思います。

• Sass: Dart Sass Command-Line Interface

参考になれば幸いです。

∞Tadashi Suyama∞