こんにちは、ティウェブ藤園です。

Webサイト制作に欠かせないCSSの構築のために、便利なSass／Scssを使用している方は多いと思います。

ティウェブでも古くから保守させていただいているWebサイトなどを除いて、徐々に新規案件からScssを利用していく流れになりました。

しかしながら、あまりをターミナルでコマンドをたたいたりすることのない人間からすると、ScssをCSSにするコンパイル作業がなかなかややこしい存在です。

Sass／Scssは作業効率を上げるためのものですが、コンパイル作業の手間を少なくしなければ逆に作業効率が下がってしまうことになりかねないという側面も抱えています。

そこで、より作業効率をアップするために、私が使用しているVSCodeのプラグイン（DartSass対応版）をご紹介します。

Sass／Scssの種類

実はSass／Scssにはいろいろと種類があります。

• Ruby Sass（Sassが発表された当時のもの。サポート終了済み）
• LibSass（Ruby Sassの次に開発されたもの。2020年10月から非推奨だけど未だ大人気）
• DartSass（LibSassの次に開発されたもの。これから利用するべき。Sass公式推奨）

今から利用するならDartSassですが、開発が追い付かなくなったために昨年非推奨になったもののLibSassの人気が強く、記法や設定の紹介記事などもLibSassであることが多いです。

不明点の調べやすさ、各種プラグインやツールの多さなどから、私も最初はLibSassから学び、現在はDartSassに移行しました。

DartSass利用にあたってのネック

LibSassからDartSassに移行するにあたって問題となったのが、コンパイル作業のための各種プラグイン、ツールの少なさと不便さです。

LibSassなら１ボタンでコンパイルできていたものが、DartSassにすると別のツールを立ち上げないといけなかったりとなかなかに手間が多くなってしまって、せっかくCSSの記述を簡単にして作業効率をあげるつもりのはずが、Sass／Scssを使わないで直接CSSを書いた方が速いのでは……？と考えるほどでした。

良いプラグインが開発されるまで非推奨のLibSassに戻るか、非推奨のものを使うぐらいならCSSを直接書く形に戻るか、今後書き直す手間を考えてしぶしぶ効率の悪さを我慢してDartSassを使うか悩んだのですが、探しに探した結果、VSCodeのプラグインでDartSass対応の便利なものが見つかりました。

Live Sass Compiler（DartSass対応版）

LibSass利用時に一番便利だったVSCodeのコンパイル用プラグインとして「Live Sass Compiler」というプラグインがあり、VSCodeでのSass／Scssのコンパイル方法を調べると、ほぼほぼこのプラグインでの設定方法が表示されます。

VSCodeにインストールし、いくつかの項目を設定したあとは画面下の「Watch Sass」ボタンをクリックするだけで、読み込んでいるSass／Scssファイルを更新するたびにCSSファイルをコンパイルしてくれるという、一番手間がかからないプラグインです。

こちらのDartSass対応版を別の方がリリースされているのを見つけました。

🌟Live Sass Compiler（Glenn Marks）

Live Sass Compilerのオリジナルは開発が2018年7月頃に止まっており、DartSassには対応しておらず、DartSass利用のためには他のプラグインやツールを頼るしかない状態でした。

同じVSCodeのプラグインでDartSass対応のものであれば「DartJS Sass Compiler and Sass Watcher」がありますが、こちらは@use（LibSassで言う@import）を使用して読み込んだ先のファイルが更新されてもCSSファイルが書き出されないという難点があります。

また、外部のコンパイラツール「Prepros」も利用しましたが、無料版だと度々ポップアップが表示されてしまって、LibSassが非推奨になった後だったために有料版にするかはタイミング的に悩ましいものでした。

2021年12月時点でオリジナルのインストール数が1,822,579に対して、DartSass対応版が64,990という少なさということからわかるように、まだあまり広まっていないようですが、オリジナルと使用感も設定方法も同じということもあり、徐々に広まっていくのではないかと思われます。

まとめ

ということで、今回はVSCodeのプラグイン「Live Sass Compiler（Glenn Marks）」をご紹介させていただきました。

コンパイル作業の不便さがDartSass利用にあたって1ヶ月近く悩んだ部分であり、最大のネックでしたが、こちらのプラグインを導入してからは問題なく
DartSass でも作業効率をアップすることができています。

LibSassは日本語の記事もたくさんあり学習・導入しやすいですが、すでに非推奨となってから1年が経過していますので、ぜひDartSassへ移行してみてはいかがでしょうか。

IT業界はこういったサービスなどの入れ替わりが激しいですが、使用する技術やツールなどはきちんと情報を収集して、より適切なものへと対応していきたいと思います。