DartJS Sass Compiler and Sass WatcherでSassを自動コンパイル

昨今のWeb制作では、CSSを効率的に書くことができるSass（SCSS記法）で記述する手法を採用しているところも増えておりますが、Sassの書き方も新しい機能が追加されたり、時代によってアップデートされます。

Sassのコンパイル方法として、Sass公式がDart Sass（ダートサス）を推奨しており、今後はDart Sassを利用していくことになるでしょう。

いくつかのSassの機能にも変更があり、ファイルの分割管理で読み込むときに利用する「@import」が廃止予定となっています。
2021年10月ごろには、@importのサポートが非推奨となり、その後@importのサポートが終了する流れになります。

効率よく作業を進めるには、Sassファイルを保存した時に自動でコンパイルできる、コードエディタの拡張機能が必要となります。
これまでにも、Live Sass CompilerというVisual Studio Codeの拡張機能がありました。
以下の記事でご紹介しています。

↓　↓　↓

Visual Studio CodeでSassを自動でコンパイルする

Live Sass Compilerも今後、Sassの新しい機能に対応してくれれば嬉しいのですが。。。

Dart Sassのコンパイル作業にとして便利なのが、Visual Studio Codeの拡張機能「DartJS Sass Compiler and Sass Watcher」です。
こちらの拡張機能はインストールして有効にするだけで、Sassファイルの保存時に自動でコンパイルされCSSファイルを生成してくれます。

Visual Studio Codeは無料で高機能の人気のコードエディタになります。
多くの方が利用されていると思いますが、まだ使ったことがない方は是非インストールして使ってみてください。

ちょっとした設定を含め、「DartJS Sass Compiler and Sass Watcher」の使い方をご紹介します。

DartJS Sassコンパイル

コードエディタの左メニューの拡張機能から、「DartJS Sass Compiler and Sass Watcher」を検索してInstallを選択します。

インストールが完了したら、すぐに利用できます。
Sassファイルを編集して保存すると、自動的に　CSSファイルが生成されます。

しかし、デフォルトの設定のままですと、CSSファイルはSassファイルと同じディレクトリ（フォルダ）に生成されます。
通常CSSファイルは、管理がしやすいようにCSSフォルダにまとめておいたり、WordPressですとテーマのルートディレクトリに置きます。

ですので、拡張機能の設定を編集して、CSSファイルを生成するディレクトリを変更します。

コードエディタの左メニューの拡張機能から、今回の拡張機能の設定アイコンを選択して、設定に進みます。

現在、コードエディタでプロジェクトフォルダを開いていれば、プロジェクトごとで「Workspace」として設定できます。

「Target Directory」の項目からディレクトリを設定します。
例えば、WordPressではテーマのルートディレクトリでcssファイルを管理しますので、「./」としてテーマのルートディレクトリを設定します。
他、 CSSフォルダの中で管理のであれば、「css/」とします。

Sassフォルダで管理しているstyle.scssファイルを更新すると、プロジェクトのルートディレクトリにstyle.cssが生成されます。
と同時に、minified（圧縮版）のstyle.min.cssも生成されます。

Webサイトの表示速度を少しでも改善したいのであれば、圧縮版のCSSファイルを読み込んでもいいでしょう。
圧縮版も一緒に生成するかは、拡張機能の設定の「Output Format」の項目から、「cssonly」か「minified」かを変更できます。
デフォルトは「both」で両方となっています。

他にも、状況によってはSass（scss）ファイルでベンダープレフィックス（ -webkit- 、 -moz- 、 -ms-等）を記述していかなくてはいけないことも出てきますが、今回の拡張機能では、コンパイルすると自動でベンダープレフィックスの記述が追加されますので、何も気にせず通常の記述をしていくだけでOKです。
おそらく、拡張機能のバージョンをアップグレードしていくことで、その時々に必要なベンダープレフィックスを追加してくれるかと思います。

Sassファイルを分割管理していて、インポート用のファイルでまとめている場合、「_（アンダースコア）」から始まるpartial（パーシャル）ファイルは、編集後の保存時に自動コンパイルされません。
分割管理しているファイルを更新しましたら、style.scssを開いて上書き保存し、自動コンパイルでstyle.cssを生成しましょう。

アンダースコアから始まるファイルをコンパイルする設定もありますが、各ファイルが生成されてしまいます。
今後はpartialファイルにも対応してくれることを願います。

エディタのタブをうまく分割して、style.scssをさほど邪魔にならない程度に小スペースで表示させておけば、partialファイルの保存後にstyle.scssの保存もスムーズになるかと思います。

ここでご紹介しているサンプルでは、Sassファイルを分割して、ディレクトリ構造を作って管理しています。
Sassファイルの分割管理については、以下の記事でご紹介しています。

↓　↓　↓

Sassファイルの管理方法。ディレクトリ構造（フォルダ・ファイル構成）

Sassのコンパイルツールはいろいろありますが、Visual Studio Codeでは拡張機能をインストールするだけで自動コンパイルができます。

今回ご紹介した「DartJS Sass Compiler and Sass Watcher」を使って、快適にWeb制作を進めていってください。