Visual Studio Code で Sass をコンパイルする Live Sass Compiler
HTML と CSS くらいのライトな環境で作業をしたいんだけど Sass は使いたいよね、というような VSCode で完結したい時に Sass から CSS へコンパイルできる 「 Live Sass Compiler 」を導入していきます。
Live Sass Compiler の導入
Live Sass Compiler は拡張機能として用意されているので、画面左の拡張機能をクリックするか次のキーボードショートカットを使います。
Ctrl + Shift + X
表示されたサイドバーに「 Live Sass Compiler 」と入力します。
「Install」をクリックしてしばらく待つとインストールが完了します。
Live Sass Compiler の設定
作業環境に合わせて Live Sass Compiler の設定を行います。拡張機能のサイドバーを開き「 Live Sass Compiler 」の「歯車アイコン」をクリックします。表示されたメニューから「拡張機能の設定」を選択すると「 Live Sass Compiler 」の設定画面が表示されるので必要に応じて設定していきます。
表示された画面を確認すると、次の項目の設定ができるようです。
設定項目 | 内容 |
---|---|
Autoprefix | 自動でベンダープレフィックスを追加する際に対象とするブラウザの条件 |
Exclude List | コンパイル対象から除外するファイルの指定 |
Formats | コンパイル後のCSSファイルのフォーマットや保存先のパスなど |
Generate Map | コンパイル時にMAPファイルを出力するか |
Include Items | コンパイル対象に含めるファイルの指定 |
Show Output Window | 出力パネルを自動的に表示するかどうか |
Autoprefix
自動でベンダープレフィックスを追加する条件を設定します。設定は、 Browserslist のフォーマットで記述します。
例えば、「シェアが1%以上」または「最新バージョンから数えて2つまで」という条件は以下のように指定します。
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
]
Exclude List
コンパイル対象から除外するファイルを指定します。グロブ( glob )と呼ばれるワイルドカードを使ったパターンで指定することができます。
次の例は、すべての node_modules ディレクトリ配下にあるすべてのファイルがと、.vscode ディレクトリ配下の全てのファイルがコンパイル対象から除外されます。
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
Formats
コンパイル後のCSSファイルの保管場所やフォーマット・ファイル名を設定します。設定しない場合は、 Saas ファイルと同じ場所に CSS ファイルが作成されます。
設定は、 format ・ extensionName ・ savePath の3つをセットとして、複数定義することができます。例えば、「コンパイル結果が確認しやすいフォーマット」と「軽量化した読み込み用フォーマット」の2パターンを、指定のディレクトリに出力したい場合は以下のように設定します。
"liveSassCompile.settings.formats": [
// コンパイル結果が確認しやすいフォーマット
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
},
// 軽量化した読み込み用フォーマット
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css/"
}
]
設定項目 format
format は、次の4つから選択できます。デフォルト設定はexpandedです。
- expanded
- compact
- compressed
- nested
コンパイル後の結果は、次のように出力されます。
/* expanded */
p {
font-size: 16px;
}
p span {
color: blue;
}
/* compact */
p { font-size: 16px; }
p span { color: blue; }
/* compressed */
p{font-size:16px}p span{color:blue}
/* nested */
p {
font-size: 16px; }
p span {
color: blue; }
設定項目 extensionName
extensionName には、コンパイルしたファイルの拡張子を指定します。(デフォルトの設定は .css になります。)
format に compressed を指定している場合に .min.css を指定しておくと、よくみかける軽量化されているコードになります。
"liveSassCompile.settings.formats": [
// 軽量化した読み込み用フォーマット
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css/"
}
]
設定項目 savePath
savePath は、出力先を指定します。「/」で始めた場合、ワークスペースを root として処理されます。
例えば、次のディレクトリ構造で用意したとします。
ワークスペース
|- css
|- sass
コンパイル結果を css ディレクトリに出力する場合は、 savePath に /css/ を指定します。
GenerateMap
MAP ファイルを生成するかどうかを true , false で指定します。(デフォルトは true です。)
"liveSassCompile.settings.generateMap": true
Include Items
指定したファイルのみをコンパイルします。
"liveSassCompile.settings.includeItems": [
"path/subpath/a.scss",
"path/subpath/b.scss",
]
Show Output Window
VSCode の出力ウィンドウを表示するかどうか設定します。 Live Sass Compiler は、起動後の初回コンパイル時やコンパイルエラー発生時などに出力パネルに情報が出力されます。チェックマークを外すと( false に設定すると)、ログは出力しますが出力パネルは自動で表示しなくなります。非表示に設定した場合でもステータスバーのエラー数はカウントされ、パネルを開くとエラーの内容を確認できます。
"liveSassCompile.settings.showOutputWindow": false
Live Sass Compiler の使い方
Live Sass Compiler は、コマンドを使ってコンパイルする方法とファイルの更新を監視して更新都度コンパイルする方法が用意されています。
Compile Sass
コマンドを使ってコンパイルを実行するには、コマンドパレット開いて 「 Live Sass: Compile Sass 」と入力します。
Watch
Live Sass Compiler には watch モードというものが用意されており、コマンドを実行することなくファイルを更新する都度コンパイルを実行してくれます。
watch モードを実行するには2つの方法があり、1つはコマンドパレット開いて 「 Live Sass: Watch Sass 」と入力します。もう一つの方法は、ステータスバーに表示される「 Watch Sass 」をクリックします。
watch モードを実行すると一度 Sass ファイルがコンパイルされ、 Sass ファイルの更新を監視し始めます。 Sass ファイルの更新を検知すると自動敵にコンパイルが実行されるようになります。
Live Server や Live Sass Compiler を組み合わせれば、軽めのコーディング環境を用意することができます。