Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」

Sassをコンパイルする方法は様々です。
案件レベルでがっつりする場合は開発環境を整える必要がありますが、ちょっと1人でSassを触りたいレベルであればVisual Studio Codeの拡張機能を使うとラクです。

今回はVisual Studio CodeでDart Sassのコンパイルができる「DartJS Sass Compiler and Sass Watcher」を紹介します。

DartJS Sass Compiler and Sass Watcher

marketplace.visualstudio.com

DartJS Sass Compiler and Sass Watcher - Vi...

https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

Extension for Visual Studio Code - Compile Sass and Scss files using DartSass Compiler - Visual Studio Code (vsce) plugin

下記2つの機能が使える拡張機能です。

• Sassのコンパイル
• Auto Prefix（CSSのベンダープレフィックス自動付与）

「Live Sass Compiler」という拡張機能も有名ですが、こちらはDart Sassには対応していません。
これから勉強するのであれば、Dart Sassを使うようにした方がいいでしょう。

marketplace.visualstudio.com

Live Sass Compiler - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.

基本的な使い方

インストールすれば、ワークスペース内でSassの.scssファイルを保存すると自動でコンパイルされます。
しかし、デフォルトの設定のままだと、CSSファイルはSassファイルと同じディレクトリに生成されます。

Sassは管理しやすいように別フォルダで管理することの方が多いので、設定を変えて使います。

設定の変更

Visual Studio Codeの設定を変更したり、settings.jsonファイルにコードを追加して設定を変更します。

CSSファイルの生成場所を変更

「dartsass.targetDirectory」でCSSファイルの生成場所を変更できます。

開いているフォルダのルートディレクトリに生成したい場合は「./」と設定します。
「assets」フォルダ内の「css」フォルダに生成したい場合は「assets/css/」とします。

{
  "dartsass.disableAutoPrefixer": "assets/css/"
}

これで生成場所が変更されました。

圧縮版のminファイルを生成するかどうかの設定

デフォルトでは通常のCSSに加えて、改行やスペースを全て除いて容量を節約した「○○.min.css」も一緒に生成されます。

通常版だけでいいか、それとも圧縮版だけ生成するかなどの設定ができます。

{
  "dartsass.outputFormat": "both"
}

不要な機能の無効化

デフォルトで有効化されている機能の中から、不要なものは無効化できます。