Sassのコンパイルの種類
最近ウェブのフロントエンジニアの方がTwitter上で「Sassのコンパイルに、何を使っていますか？」というアンケートをTwitterで行っていた。
結果はruby-sassが10.6%、node-sass / LibSassが57.7%、dart-sassが7.8%、わからずに使っているが23.9%という結果となっていた。
現在Sassのコンパイルは主にruby-sass、node-sass、LibSass、dart-sassのいずれかが使用されており、Sassの公式サイトではdart-sassの使用が推奨されている。
dart-sassが推奨されているのに使用者が少ないのは最近リリースされたばかりだからです。
Sassはコンパイル方式で書き方が変わる。例えばdart-sassでは@importは廃止予定のため@useを使用する。
また、ruby-sassだとコンパイルの処理がほかと比べると遅いため、可能であればdart-sassに変えたほうが処理が早く業務効率も良くなる。
node sass vs grunt sass vs dart sass vs ruby sass
以上の理由から何でコンパイルしているかは必ず知っておいたほうが良いです。
ターミナルからコンパイル方式の確認方法
ターミナルからコンパイル方式を確認するにはpackage.jsonが存在するディレクトリで以下のコマンドを実行する。
npm list --depth=0 | grep sass | cut -f 1 -d "@"
こちらを実行して表示される文字列によって以下のように分別できる。
| コマンド実行結果 | コンパイル方式 |
|---|---|
| sass | dart-sass |
| node-sass | node-sass |
| libsass | LibSass |
| ruby-sass | ruby-sass |
上記はグローバルにインストールしていない場合の確認方法のため、グローバルにインストールしている場合はnode-sass -vや前述のnpm listに-gオプションを追加することで確認できる。
npm list --depth=0 -g | grep sass | cut -f 1 -d "@"
またruby-sassと書いたがgem install sassでインストールしている場合はsass -vで確認できる。最新バージョンだと頭にRubyが付くのでわかりやすい。
sass -v Ruby Sass 3.7.4
