2022.07.11
Live Sass Compiler、Dart SCSSが使えるようになったってよ。
こんにちは、Maromaroの松橋です。
先日、LibSassが非推奨になったという記事を確認しました。
Sassの公式サイトを確認すると、確かに非推奨がアナウンスされてました。
さらに抜粋＆意訳すると、
LibSass を非推奨にし、代わりに Dart Sass を使用を推奨します。既存のLibSassユーザーは、Dart Sassに移行する計画を立て、すべてのSassライブラリーは、いずれLibSassのサポートを停止する計画を立てることをお勧めします。
とまで書かれていたので、調べてみました！
LibSassとDart Sassとは
LibSassは、C/C++による実装で、ラッパーが多くの言語で用意されているようですが、開発自体は活発ではないようで、冒頭で紹介した記事のように非推奨となってしまいました。
Dart Sassは、Dart(Googleがよって開発された言語のようです)による実装で、開発が活発で、様々な機能が追加されていく予定なので、公式としても使用を推奨しています。
恥ずかしながら、SCSSファイルをコンパイルさせるライブラリに種類があるのははじめて知りました。。。！
愛用のLive Sass CompilerはLibSassだった。そして開発は終了していたと思われたが。。。！？
普段WEB制作をする時に私はVisual Studio CodeのLive Sass Compilerという便利な拡張機能を利用してコンパイルさせていました。
インストールし、ボタン一回の押下だけでwatchモードでSCSSファイルの保存を検知し、自動でコンパイルさせることができたので、毎回使用していました。
拡張のGitHubにリポジトリがあったのでソースコードを確認すると、
/*! sass.js – v0.10.5 (2cd3782) – built 2017-06-25
providing libsass 3.4.5 (31573210)
via emscripten 1.37.0 ()
*/https://github.com/ritwickdey/vscode-live- sass-compiler/blob/master/lib/sasslib/sass.js
「providing libsass 3.4.5 (31573210)」とあったので、この拡張はLibSassを元にしたJavaScriptファイルがコンパイラとなっていることで間違いなさそうです。。。！
さらにGitHubのリポジトリのREADMEには、この拡張は非推奨「IMPORTANT: This extenison has been deprecated.」、との文字がありました。
しかし、その下に、「Please install〜」と、別のリポジトリへ誘導するリンクがありクリックしてみると、
なんと、現在も開発されているLive Sass Compilerリポジトリを発見！別の方がの開発を引き継いで開発されていました！
そして調べてみると、Dart Sassが使われているとのこと！
Does it use DartSass or LibSass? #195
早速インストールして、これまでコンパイルさせてきたSCSSファイルに試験的に使ってみました。
新しいLive Sass CompilerのVisual Studio Codeのマーケットプレイスは下記になります。
Live Sass Compiler – Visual Studio Marketplace
除算はmothオブジェクトでする必要がある
早速コンパイルさせてみると、一応コンパイル自体はLibSassの時と同様にできたので、後方互換性をもたせて開発されているようです。
ただ、割り算・除算で一部Warningが出ていました。
Warning:
Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($size, 768) or calc($size / 768)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
189 | @return ($size / 768) * 100vw;
| ^...........^
╵
Warningとなっていた部分は下記のコードです。
@function calcvw($size){
@return ($size / 768) * 100vw;
}
この書き方は、Dart Sassでは非推奨になる書き方のようで、下記ようにする必要があるみたいです。
@use "sass:math";
@function calcvw($size){
@return (math.div($size, 768)) * 100vw;
}除算・割り算する時は、/ スラッシュを使用するのではなく、ビルドインモジュールのmathオブジェクトのdivメソッドを使用する必要があるとのことです。
@importは使用可能
Dart Sassは、@importではなく@useの使用を推奨されいるようなので、@useは変数などに名前空間があり、LibSassとは違った書き方が求められるとのことです。
ですが、今のところ、@importを使用していてwarningなどは出ずにコンパイルできました。
そのため、これまで作成したSCSSファイルで@importを多用していて、@useに置き換えなければいけない！というシチュエーションにはすぐにはならなさそうです。
今後どうなるかわかりませんが、、、とりあえず一安心。
まとめ
古いLive Sass Compilerからの設定も引き継いでくれたりと、これまでのワークフローと変わらず利用できたので、これからも引き続きお世話になろうと思います。
Visual Studio Codeのアップデートにより、古いLive Sass Compilerが将来的に動かなくなる可能性もあるので、開発が活発な新しいDart SassのLive Sass Compilerで、SCSSを書いていこうと思います！
以上、Maromaroの松橋でした。
