VS CodeでSassのコンパイルはEasy SassではなくLive Sass Compilerを使うべき

Easy Sassとは

VS Codeの拡張機能でSassをコンパイルしてCSSファイルを生成する。

Easy Sassという名前の通りSassを簡単にコンパイルできるのでSassを覚えたての初心者の方がよく使用されているが、Webサイト制作に使用するのは避けたほうが良い。

Easy Sassの使用を避けたほうが良い理由

Easy Sassの使用を避けたほうが良い理由はAutoprefixerが付いていないから。

AutoprefixerとはCSSベンダープレフィックス付きのCSSプロパティを自動で追加する機能。

例えばtransformのプロパティはAndroid 4.4以下はベンダープレフィックスがないと適用されないのでAndroid 4.4以下も対象にしているWebサイトだとベンダープレフィックスが必須となる。

https://caniuse.com/#search=transform

ほかにもベンダープレフィックスが必要なプロパティはたくさんあるので手作業ですべて追加するのは現実的ではないし作業効率が悪い。

Live Sass Compilerを使用する

前述の通りEasy SassはAutoprefixerが使用できないので、ほかのAutoprefixerが使用できる拡張機能をインストールしたほうが良いです。

iwb.jpではLive Sass Compilerという拡張機能をオススメします。

Live Sass Compiler - Visual Studio Marketplace

Live Sass Compilerは単独でSassをコンパイルするための拡張機能の中では評価が高く、使用者も多い。

使い方はLive Sass Compilerをインストールしたらsetting.jsonを開いて以下の設定を記述して、VS CodeでSCSSファイルを開いている状態でVS Code下部にある「Watch Sass」をクリックするだけだ。

setting.jsonは表示 => コマンドパレットから検索して開く。

"liveSassCompile.settings.formats": [
    {
        "format": "expanded", // or compressed
        "extensionName": ".css",
        "savePath": "/css"
    }
],
"liveSassCompile.settings.excludeList": [
    "/**/node_modules/**",
    "/.vscode/**",
    "/.history/**"
],
"liveSassCompile.settings.autoprefix": [
    "last 2 versions",
    "iOS >= 10",
    "not dead"
]

liveSassCompile.settings.formatsはformatにSassのコンパイル時の出力形式、extensionNameは拡張機能、savePathはコンパイルしたCSSの保存先のディレクトリを指定する。

liveSassCompile.settings.excludeListにはSassのコンパイルの除外対象となるディレクトリを指定する。

liveSassCompile.settings.autoprefixはautoprefixの対象ブラウザを追記する。(詳細はbrowserslistの公式ページを参照)

とりあえずsettings.jsonに上記のliveSassCompile.settingsの内容が記載されていれば「Watch Sass」をクリックするだけでCSSにコンパイルされるので試してほしい。

Live Sass CompilerのWatch Sassをクリック
Live Sass CompilerのWatch Sassをクリック
カテゴリーcss