Visual Studio Code で Sass をコンパイルする Live Sass Compiler

メモ:  Category:front-end

HTML と CSS くらいのライトな環境で作業をしたいんだけど Sass は使いたいよね、というような VSCode で完結したい時に Sass から CSS へコンパイルできる 「 Live Sass Compiler 」を導入していきます。

Live Sass Compiler の導入

Live Sass Compiler は拡張機能として用意されているので、画面左の拡張機能をクリックするか次のキーボードショートカットを使います。

Ctrl + Shift + X
拡張機能の表示

表示されたサイドバーに「 Live Sass Compiler 」と入力します。

Live Sass Compiler を検索

「Install」をクリックしてしばらく待つとインストールが完了します。

Live Sass Compiler の設定

作業環境に合わせて 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 の実行

watch モードを実行すると一度 Sass ファイルがコンパイルされ、 Sass ファイルの更新を監視し始めます。 Sass ファイルの更新を検知すると自動敵にコンパイルが実行されるようになります。

Live Server や Live Sass Compiler を組み合わせれば、軽めのコーディング環境を用意することができます。

bluenote by BBB