Visual Studio CodeでSassをコンパイル

SassはCSSの拡張言語であり、CSSにはない便利な機能（記述法）を使用できるので、開発を効率良く進めることができます。しかし、Sassで書かれたスタイルシートをWebで使用するには、SassファイルからCSSファイルへコンパイルする必要があります。

コンパイルの方法は、コマンドラインでの実行、専用のソフトウェアを介して実行など、いくつか方法があります。その中でも私が一番良いと思ったのは、普段使用しているエディターの「Visual Studio Code」の拡張機能を使用した方法です。

そこで今回はVisual Studio Codeの拡張機能「Live Sass Compiler」でのコンパイル方法と、各項目の設定についてご紹介します。

コンパイルの実行

Compile Sass

まずはLive Sass Compilerをインストールします。そして、VS Codeのコマンドパレットに>Live Sass: Compile Sassと入力して実行します。このコマンドの実行により、Sassファイルがコンパイルされます。

とくに設定しなければ、コンパイルするSassファイルと同じディレクトリにCSSファイルとMAPファイルが出力されます。コンパイルするファイルがstyle.scssの場合、style.cssとstyle.css.mapのようにSassファイルの名前が継承されます。あとはコンパイル後のCSSファイルをHTMLなどから読み込むだけです。

ちなみにSassには、SASSとSCSSの2つの形式がありますが、どちらの形式でもコンパイル可能です。

Watch Sass

watchモードというものがあり、これを使用すると、Sassファイルのコンパイルコマンドを手動で実行しなくてもよくなります。watchモードを開始するには2つの方法があります。

• コマンドパレットから>Live Sass: Watch Sassコマンドを実行する。
• Live Sass Compilerが有効時にVisual Studio Code下部のステータスバーに表示される、「Watch Sass」をクリックする。

watchモードを開始すると一度Sassファイルをコンパイルして、以降のSassファイルの更新を監視し始めます。その後、Sassファイルの更新を検知する度に自動でコンパイルを行います。

Live Sass Compilerがファイルの更新を監視している間は、ステータスバーに「Watching…」と表示されます。

Visual Studio Codeを終了すると、再度起動する度にwatchモードを開始しなければ、自動でコンパイルは行われません。

コンパイルの設定

設定変更はVisual Studio Codeの設定画面から行えます。拡張機能のタブを開いて「Live Sass Compiler」の「ギアマーク」をクリック、「拡張機能の設定」を選択すると「Live Sass Compiler」の設定項目だけを表示できます。

設定できる項目は以下の6項目です。

Formats

コンパイル後のCSSファイルのフォーマット・ファイル名・保存場所を指定できます。3項目を1つのセットとして、複数のセットを設定できます。

たとえば「コンパイル結果の確認用」と「軽量化した読み込み用」の2パターンを、root直下のcssディレクトリに出力したい場合は以下のように設定します。

"liveSassCompile.settings.formats": [
    // 確認用の読みやすいフォーマット
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css/"
    },

    // 読み込み用の軽量化されたフォーマット
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/css/"
    }
]

項目別に1つずつ説明します。

format

formatはexpanded、compact、compressed、nestedの4種類から選択できます。デフォルト設定はexpandedです。元のSassファイルとコンパイル後のCSSファイルの例を示します。

SCSS

p {
    font-size: 14px;

    span {
        color: red;
    }
}

CSS

/* expanded */
p {
  font-size: 14px;
}

p span {
  color: red;
}

/* compact */
p { font-size: 14px; }

p span { color: red; }

/* compressed */
p{font-size:14px}p span{color:red}

/* nested */
p {
  font-size: 14px; }
  p span {
    color: red; }

extensionName

extensionNameには拡張子を指定できます。デフォルト設定は.cssです。

formatでcompressedを指定している場合に.min.cssを指定しておくと、軽量化されているコードというのが一目でわかります。

savePath

savePathには保存場所のパスを指定します。デフォルト設定はnullで、Sassファイルと同じ場所に保存されます。パスを指定する場合、以下の指定方法のどちらかで指定します。

• 先頭を/で始めると、ワークスペースをrootとして、出力先のパスを指定できます。/css/のように指定すると、root直下のcssディレクトリに保存されます。
• 先頭を~で始めると、コンパイルするSassファイルを起点に出力先のパスを指定できます。~/css/のように指定すると、Sassファイルと同じ階層のcssディレクトリに保存されます。

末尾の/は無くてもディレクトリと認識します。

Autoprefix

自動でベンダープレフィックスを追加する設定です。対応したいブラウザの条件を指定することで、必要なベンダープレフィックスを自動で追加してくれます。

条件の指定はBrowserslistのフォーマットで記述します。判定はブラウザごとではなくバージョンごとに行われます。

「日本国内のシェアが1%以上」または「最新バージョンから数えて2つまで」という条件は以下のように指定します。

"liveSassCompile.settings.autoprefix": [
    "> 1% in JP",
    "last 2 versions"
]

とくに指定が無ければデフォルト設定のままでも、ある程度のブラウザに対応できます。

もしAutoprefixを無効にしたければ"liveSassCompile.settings.autoprefix": []のように値を空の状態のまま設定ファイルに記述します。

browserl.istで、入力した条件に適合するブラウザとそのバージョンを確認できます。

Generate Map

MAPファイルを生成するかどうかを指定します。デフォルト設定はtrueで、MAPファイルを生成します。MAPファイルが不要な場合はfalseを指定します。

"liveSassCompile.settings.generateMap": true

ブラウザでのデバッグ時にMAPファイルがあると、コンパイル前のSassファイル名と記述されている行数を確認できます。

Exclude List

コンパイル対象から除外するファイルを指定します。Globパターンで指定することもできます。（*などのワイルドカードを使用した方法）

"liveSassCompile.settings.excludeList": [
    "**/exclude.scss",
    "**/exclude/**"
]

上記のように記述すると、すべてのディレクトリのexclude.scssと、すべてのexcludeディレクトリの中身がコンパイル対象から除外されます。

Include Items

コンパイルに含めるファイルを指定します。この項目を設定した場合、指定されたSassファイルのみがコンパイルされます。この設定はExclude Listの反対で、コンパイルしたいファイルが少ない時はこちらで設定した方が簡単です。Exclude Listと同じく、Globパターンで指定することもできます。

"liveSassCompile.settings.includeItems": [
    "**/include.scss"
]

上記のように記述すると、すべてのディレクトリのinclude.scssがコンパイルされます。もしExclude Listと対象のファイルが重なった場合、Exclude Listが優先されます。

Show Output Window

Visual Studio Codeの出力ウィンドウの表示設定です。この項目は設定画面のチェックマークを付け外しするだけで設定できます。チェックマークを外すと、以下のプロパティと値が設定ファイルへ追記されます。

"liveSassCompile.settings.showOutputWindow": false

Live Sass Compilerは起動後の初回コンパイル時やコンパイルエラー発生時などに、出力パネルを表示させます。チェックマークを外すと（値をfalseに設定すると）、ログは出力しますが自動で出力パネルを表示しなくなります。非表示に設定してもステータスバーのエラー数はカウントされ、パネルを開けばエラー内容の確認もできます。

おわりに

コマンドラインやコンパイルソフトでも、基本的には同じようなことができます。それでもLive Sass Compilerを使う利点は、VS CodeだけでSassに関するすべてが完結する点にあると思います。

以上、Visual Studio Codeの拡張機能「Live Sass Compiler」でのコンパイル方法と設定についてご紹介しました。次回もSassのことを記事にしようと思います。