拡張機能[Easy Sass]から[Live Sass Compiler]に乗り換えた話し | VSCode

ずっと前Sassを使うようになってからコンパイラーは、VSCodeの拡張機能「Easy Sass」を使っていました。
理由は簡単で、これしか知らなかったのと使い方も簡単だったから。
つい最近、そんな簡単コンパイラー「Easy Sass」よりも便利な拡張機能「Live Sass Compiler」を知ったので乗り換えたら、震えるほど快適になったという話。

乗り換えた理由は2つ

1. ベンダープレフィックスの自動化（自動挿入）ができる
2. ソースマップが作られるのでデバックが楽になる

これはかなり便利だと思う。
もっと早く知っていたら時間短縮できていたなー。
ベンダープレフィックスについて調べ始めると、あっという間に何時間も過ぎてしまうし、そもそもいまだによく分かっていないという。
ソースマップとは、例えばChromeデベロッパーツールを開いたときにあるスタイルについてcssではなく元のscssファイルの何行目のコードなのかを表示してくれるようになるもので、作業が大変便利になる。
どちらも「Easy Sass」には無い機能だったので（多分）乗り換えして大正解です。

「Live Sass Compiler」の設定

わたしはファイル構造は次のように分割して作っているのですが、デフォルトのままだとscssと同じ階層にコンパイルされてしまうので、コンパイル先のフォルダ指定を設定するのと、コンパイルしないフォルダの指定もします。
といってもめちゃ簡単で、例によって「settings.json」を開いてコードを追記するだけです。

 インストール及びオプション設定の手順は次のとおり。

1. 表示＞拡張機能からのインストール、有効化
2. Live Sass Compilerの歯車：管理＞拡張機能の設定＞"settings.jsonで編集"をクリックしてユーザー設定の「settings.json」を開く
3. 以下のコードを追記する

    "liveSassCompile.settings.formats": [ //Sassの出力内容の設定
        {
          "format": "expanded", //nested、compact、compressedのどれかを選ぶ
          "extensionName": ".css", //拡張子を.cssとして出力
          "savePath": "/css" //出力先をcssフォルダの中にする
        }
      ],
      "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
        "**/node_modules/**",
        ".vscode/**",
        ".history/**"
      ],
      "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
        "last 2 versions",
        "ie >= 11",
        "Android >= 4",
        "ios_saf >= 8"
      ]

「Live Sass Compiler」の使い方

インストールすると、VSCode画面右下あたりに「Watch Sass」のボタンが現れるので、それをクリックするだけ。
試しに、style.sessに入力して [ctrl]+[C] で保存した後、次のようにstyle.cssが出来ているのを確認すると・・・
「おーーー！！」って声が出ます。

そしてブラウザで表示確認の上、「F12」キーでデベロッパーツールを開いて任意のスタイルを確認すると、style.scssではなく元のscssファイルの行数が表示されているはずです。

以上です。

最後まで読んでくださって、ありがとうございます。