Visual Studio CodeでのSass導入とおすすめ設定【Live Sass Compiler】

Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽に導入できて便利です。

今回は Live Sass Compiler (Glenn Marks) の導入方法と自分なりに快適と思える設定のいくつかを書き留めておきます。

使用したバージョン Visual Studio Code 1.69.2 / Live Sass Compiler (Glenn Marks) 5.5.1

Live Sass Compiler (Glenn Marks) について

VS Codeの拡張機能「Live Sass Compiler」

Live Sass CompilerはVisual Studio Codeの拡張機能です。
ダウンロードして有効化するとVS Code上でSassの編集・コンパイルが可能になります。

拡張機能を検索すると制作者の異なる2つのLive Sass Compilerが見つかりますが、Ritwick Dey氏のものは現在更新されておらず非推奨となっているため、派生版であるGlenn Marks氏の方を使います。

設定項目等も異なるので間違えないよう注意してください。

Live Sass Compiler の特徴

  • 導入がお手軽
  • 以前のLive Sass CompilerではできなかったDart Sassのコンパイルが可能
  • オートプレフィックス機能でコンパイル時に自動的にベンダープレフィックスを付与
倉庫番
倉庫番

以前はEasy Sassという他の拡張機能を使っていましたが、Live Sass Compilerのオートプレフィックスが便利すぎるので現在ではこちらを使っています。

Live Sass Compiler のインストール・有効化

拡張機能を検索

拡張機能のアイコン」をクリックして拡張機能を管理する画面へ移動します。

続いて拡張機能の検索欄に「Live Sass Compiler」と入力します。

検索結果に2つのLive Sass Compilerが表示されますがGlenn Marks氏のものをインストールします。

「インストール」と書かれた青いボタンをクリックするとインストールが始まります。

※ インストール後は青いボタンは歯車のアイコンに変わり、設定が行えるようになります。

基本的な使い方

VS Codeを起動したらウィンドウ右下の「Watch Sass」をクリックします。表示が「Watching」に変わるとSassファイルの監視状態になり、編集したSassファイルを保存した際にコンパイルが行われます。

デフォルトではSassファイルがある場所にCSSファイルがコンパイルされます。

Live Sass Compiler の設定

おすすめ設定を紹介

インストール後はすぐにでも使えますが、おすすめの設定をいくつか紹介します。


  1. 設定画面へ進むにはインストールの時と同様に「拡張機能のアイコン」をクリックします。
  2. 検索欄が空欄の場合は「インストール済み」や「推奨」の拡張機能が表示されています。
  3. インストール済みの一覧にある「① Live Sass Compilerの歯車アイコン」をクリックし、続いて「② 拡張機能の設定」をクリックします。

Compile On Watch(監視開始時にコンパイル)

デフォルトではオン(チェック有)になっており、Watch SassをクリックしてSassファイルの監視が開始されたとき、ワークスペースにあるSassファイルが更新の有無に関わらず全てコンパイルされます。不要な場合はチェックを外します。

倉庫番
倉庫番

ワークスペースにいくつものフォルダを開いて作業することも多く、更新していないファイルが大量にコンパイルされてタイムスタンプだけ更新されるのが困っていましたがこの設定をオフにして解決です。

Watch On Launch(VS Code起動時に監視開始)

これをオン(チェック有)にするとVS Codeの起動時に自動的にSassファイルの監視を開始します。

この場合の監視開始時は前述のCompile On Watchによるコンパイルは行われません。

倉庫番
倉庫番

私は毎回「Watch Sass」をクリックするのを忘れがちだったのでこれをオンにしています。


タイトルとURLをコピーしました