VSCode 拡張機能 Live Sass CompilerでSassをコンパイルする方法

/

※本記事にはプロモーションが含まれています。

Live Sass CompilerというVisual Studio Code(ビジュアル・スタジオ・コード)の拡張機能を使って、Sassをコンパイルする方法について解説します。

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制作において、使用頻度が高い言語になりますので、ぜひ使い方を覚えて効率的な開発を行いましょう。

おすすめの書籍