概要
今回はSassのコンパイル、Autoprefixerの自動付与、SourceMapの自動生成をひとつで実装してくれる拡張機能である【Live Sass Compiler】を紹介します。
ちょっとしたSassを記述するときにタスクランナーを使うほどでもなく、サクッとコンパイルしてしまいたい時などに使えます。
コンパイラとしてKoalaやPreprosを紹介している書籍・サイトもいくつかあると思いますが、こちらの拡張機能を使えばVSCodeのみで作業が完結します。
Live Sass Compiler
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
Sassのコンパイル
コンパイルするだけであれば、エディター下部のWatch Sassボタンを押すだけでSassの監視、コンパイルが始まります。
このとき、ワークスペース内の.scssファイル、.sassファイルすべてが監視対象になりますので、対象外にしたいフォルダがあれば後述の除外リストに設定してください。
Autoprefixerの付与
Autoprefixerを自動で付与したい場合は、settings.jsonに追記する必要があります。
{
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
]
}
この設定だと「シェアが1%以上あるブラウザ」または「最後から2バージョンのブラウザ」が対象となります。
この記述の詳細については【Browserslist】のGithubから確認できます。
Browserslist
https://github.com/browserslist/browserslist
SourceMapの自動生成
SourceMapはデフォルトで自動生成されるようになっています。
不要な場合は、settings.jsonに追記することで生成されなくなります。
{
"liveSassCompile.settings.generateMap": false
}
出力フォーマットの設定
コンパイルされたCSSファイルについて圧縮形式の指定、拡張子の設定、保存先の指定ができます。
こちらはデフォルトの設定になります。
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
}
]
}
formatはexpanded、nested、compact、compressedの4つから、
extensionNameは.css、.min.cssの2つから選べます。
savePathは保存先の指定になりますが、nullにしていた場合Sassファイルと同階層に出力されます。
コンパイルしたくないフォルダ（除外リスト）を設定する
デフォルトだとワークスペース内すべての.scssファイル、.sassファイルが対象となってしまいますので、もし対象外のフォルダを設定したい場合は利用してください。
{
"liveSassCompile.settings.excludeList": [
"/path/to/directory"
]
}
おまけ
【Live Server】という拡張機能も入れるとライブリロード（更新したらブラウザに反映）も使えるようになります。
同じ制作者様の拡張機能になるので、セットで入れておくのもおすすめです。
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
まとめ
Live Sass Compilerの詳細な設定については制作者様のGithubから確認できます。
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md
複数のアプリを行き来することがなくなり、多少でも作業の効率化でできればと思います。