VS Code：Sassファイルを保存と同時にコンパイルしてくれる拡張機能「Easy Sass」

Sassファイル（SASS/SCSS）をVS Codeでコンパイルできる拡張機能「Easy Sass」を紹介します。
Sassの保存後に自動で指定した場所にCSSファイルが出力させることができ、出力時のフォーマットやコンパイルさせないファイルの指定などもできます。

インストール

拡張機能は「Easy Sass - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は easy sass と検索すれば該当の拡張機能が出てくると思います。
その後、エディタを再起動させればインストール完了になります。

使い方

使い方といっても特にこれといった手順などはなく、拡張機能の有効化後にSASSまたはSCSSファイルを更新してみると、同じディレクトリ内に圧縮・非圧縮それぞれのCSSが出力されているのを確認できると思います。

設定

拡張機能には4つの設定項目が用意されており、「設定 > 拡張機能 > EasySass configuration」で項目の確認・変更ができます。

Compile After Save（easysass.compileAfterSave）
保存と同時にコンパイルされる動きの有効・無効を選択。
Exclude Regex（easysass.excludeRegex）
正規表現を用いてコンパイルさせないファイルを指定。
Formats（easysass.formats）
出力されるCSSの拡張子やフォーマットを指定。
フォーマットは"nested", "expanded", "compact", "compressed"が指定可能。
Target Dir（easysass.targetDir）
CSSを出力させるディレクトリを指定。

1ファイルだけ出力させる

デフォルトでは「expanded」フォーマットが指定されたCSSと「compressed」フォーマットが指定されて拡張子前に.minがついたCSSの2ファイルが出力されるようになっていますが、例えばこれを「compressed」フォーマットでファイルも.minなどを付けない1ファイルだけ出力にしたければ、easysass.formatsの設定を下記のように記述します。

settings.json

"easysass.formats": [
  {
    "format": "compressed",
    "extension": ".css"
  }
]

パーシャルファイルは出力しない

ひとつのSassファイルにすべてのスタイルを書くのではなく、機能やページ毎に分割して且つファイル名の先頭にアンダーバーが付いたSassファイルを@importで読み込むといった使い方をしている場合、分割されているパーシャルファイル自体はCSSファイルとして出力はさせないと思いますが、この拡張機能はデフォルトだとすべてのSassファイルを出力させるようになっています。
これはeasysass.excludeRegexの設定に^_+と記述して、アンダーバーが付いているファイルをコンパイル対象から除外させることでパーシャルファイルを出力させないようにできます。

settings.json

"easysass.excludeRegex": "^_+"

普段からタスクランナー多用しているなら不要ですが、環境用意するのが面倒とかSassに関するちょっとしたテストを行いたい場合は手軽にできて便利だと思います。

拡張機能のインストールや詳細については以下より確認できます。

Easy Sass - Visual Studio Marketplace