Live Sass CompilerというVisual Studio Code(ビジュアル・スタジオ・コード)の拡張機能を使って、Sassをコンパイルする方法について解説します。
INDEX
Live Sass Compilerをインストール
STEP1:まずはVS Codeを開き、左メニューの下側にある拡張機能(⌘⇧X)を開きます。

STEP2:検索フォームに「Live Sass Compiler」と入力します。

STEP3:対象のプラグインが表示されたら「インストール」ボタンをクリックします。

STEP4:拡張機能のインストール済みプラグインに「Live Sass Compiler」が追加されたら、インストール完了です。

Live Sass Compilerを起動する
Live Sass Compilerをインストールできたら、プラグインを起動してSassをコンパイルしてみましょう。
起動方法は右下にある「Watch Sass」をクリックします。

「Watch Sass」が「Watching」になったらLive Sass Compiler起動成功です。

Live Sass Compilerが起動した状態で、Sass(SCSS)ファイルを保存すると.scss
ファイルと同じ階層に、.scss
ファイルに対応した .css
ファイルと.css.map
ファイルが自動で生成されます。
Live Sass Compilerを起動すると自動でターミナルが立ち上がります。
このターミナルでは.scss
ファイルのコンパイル状況が表示されます。
もし、.scss
ファイルがコンパイルされない場合は、ターミナルに原因が表示されていますので、確認してみましょう。
ターミナルの表示が必要ない場合は、バツボタンで表示を閉じることができます。

.map
ファイル
.map
ファイルは、SassやSCSSファイルをCSSにコンパイルする際に生成される、ソースマップ(Source Map)ファイルです。ソースマップは、元のSassやSCSSファイルとコンパイル後のCSSファイルとの間の対応関係を示す情報を含んでいます。
Live Sass Compilerを停止する
Live Sass Compilerを停止するには、起動時にクリックしたら「Watching」を押すか、VS Code自体を閉じると停止します。

CSSのコンパイル(出力)先を変更する
Live Sass Compilerはデフォルトの状態では、コンパイルする.scss
ファイルと同じディレクトリにコンパイルされる設定になっています。
ここではコンパイルされるディレクトリの変更方法について解説します。
今回は以下のようなscss
フォルダにある.scss
ファイルを、css
フォルダにコンパイルするする想定で進めていきます。
htdocs
└scss/
└style.scss
└css/
CSSファイルのコンパイル先を変更する場合は、settings.json
の設定を変更します。
settings.json
ファイルを開く
STEP1:拡張機能(⌘⇧X)を開き、インストール済みのプラグインから対象のプラグインの管理(歯車)ボタンを押します。

STEP2:「拡張機能」項目をクリックします。その後、「設定」ウィンドウが表示されます。

STEP3:「設定」ウィンドウが表示されると以下の二つのタブのどちらかを選択してから、設定を変更します。(デフォルトでは「ユーザー」が選択されています)
- ユーザー:VS Code内の全てのページで設定が適用される。
- ワークスペース:指定のプロジェクトフォルダ(ディレクトリ)内で設定が上書きされる。
今回は「ユーザー」の状態で進めていきます。

STEP4:liveSassCompile > settings.formats
セクションの「settings.jsonで編集」リンクをクリックします。
その後、settings.json
ファイルが表示されます。

settings.json
ファイルを修正する
コンパイル先を変更するにはLiveSassCompile.settings.formats
セクションのsavePath
の値を変更します。
デフォルトではnull
が設定されています。
設定方法は相対パスと、絶対パス両方で設定することができます。

相対パス
相対パスでコンパイル先を指定するには、パスの初めに「~」を設定してからパスを指定します。
{
...
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css",
"savePathReplacementPairs": null
}
]
}
絶対パス
絶対パスでコンパイル先を指定するには、通常通り「/」からパスを指定します。
{
...
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
"savePathReplacementPairs": null
}
]
}
まとめ
以上で、Visual Studio Codeのプラグイン、Live Sass Compilerを使ってSassファイルをコンパイルする方法の解説でした。
SassはWeb制作において、使用頻度が高い言語になりますので、ぜひ使い方を覚えて効率的な開発を行いましょう。