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
下記2つの機能が使える拡張機能です。
- Sassのコンパイル
- Auto Prefix（CSSのベンダープレフィックス自動付与）
「Live Sass Compiler」という拡張機能も有名ですが、こちらはDart Sassには対応していません。
これから勉強するのであれば、Dart Sassを使うようにした方がいいでしょう。
基本的な使い方
インストールすれば、ワークスペース内で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」も一緒に生成されます。
通常版だけでいいか、それとも圧縮版だけ生成するかなどの設定ができます。
| 設定値 | 内容 |
|---|---|
| both | 通常版も圧縮版も両方生成する |
| cssonly | 通常版のCSS（○○.css）のみ生成する |
| minified | 圧縮版のCSS（○○.min.css）のみ生成する |
{
"dartsass.outputFormat": "both"
}不要な機能の無効化
デフォルトで有効化されている機能の中から、不要なものは無効化できます。
| 設定項目 | 内容 | 備考 |
|---|---|---|
| dartsass.disableAutoPrefixer | Autoprefixerを無効にする | マルチブラウザに対応するためのベンダープレフィックスを CSS生成時に自動で付与してくれる機能 |
| dartsass.disableCompileOnSave | ファイル保存時にコンパイルしてくれるのを無効化 | |
| dartsass.disableSourceMap | ソースマップの生成を無効化 | 一緒に生成される「style.css.map」ファイルで、これがあると、ブラウザの開発者ツールで、元の .scssファイルの何行目の記述か分かる |
| dartsass.enableStartWithUnderscores | 名前がアンダースコア（_）から始まるファイルもコンパイルを有効にする | 一般的にアンダースコアから始まるファイルはインポート用 |
