Live Sass Compilerの使い方と設定【出力先も解説】

Live Sass CompilerはSassをコンパイルするVSCodeの拡張機能ですが、出力先の設定に少し癖があります。そこで本記事ではLive Sass Compilerの基本的な使い方から出力先設定の図解まで準備して、丁寧に解説していきます。

私はSassコンパイルは基本webpackやらGulpなどその時の開発環境に使われているものでコンパイルしていますが、軽いものなら「Live Sass Compiler」を用いますし、初学者の方の最初のSass導入にもおすすめだと思っています。

VSCodeや上位互換のCursorをお使いの方、コンパイルされないとお悩みの方は、是非参考にしてください。

特にディレクトリ構成と出力先設定は、Web制作を独学していると詰まりやすい場面です。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

Live Sass Compilerのインストールと使い方
Live Sass Compilerの初期設定
Live Sass Compilerの出力先のsavePath設定
- 同階層のCSSフォルダ内にCSSファイルを出力したい場合
- 別のフォルダのCSSフォルダ内にCSSファイルを出力したい場合
Live Sass Compilerの出力先設定に慣れよう!!

Live Sass Compilerのインストールと使い方

まずはVSCodeの左側の「拡張機能アイコン」をクリックし、検索欄にlive sassと入力し、候補に出てきたLive Sass Compilerをクリックしてください。

Live Sass Compilerは２つありますが、Glenn Marks氏のLive Sass Compilerであることを確認し、インストールしてください。

2つのLive Sass Compilerの違い

前のものはDart Sassに未対応だったものが、今回利用する派生版はDart Sassにも対応したものになったということです。

インストール後に下に「Watch Sass」というテキストが出現したかと思うので、これをクリックすることで、Sassファイルを保存した時に、自動でCSSファイルにコンパイルされるようになります。

コンパイル状況やエラーに関しては下のターミナルに出力されるので、見てみて下さい。

Live Sass Compilerのよくあるエラーとして、sassファイルだけVSCodeで開いてもコンパイルできません。

必ずsassファイルが入ったプロジェクトフォルダごとVSCodeで開くようにお願いします。

Live Sass Compilerの初期設定

インストール後、歯車マークから「拡張機能の設定」をクリック。

その後「setting.jsonで編集」をクリック。

jsonファイルの編集ができるようになるので、以下のコードをコピペしてください。

"liveSassCompile.settings.formats": [
    {
      "format": "expanded", // 出力されるCSSの形式。"expanded"は通常の読みやすい形式。"compressed"は圧縮された形式。
      "extensionName": ".css", // 出力されるファイルの拡張子。通常は.css。
      "savePath": null // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、'/'はルートディレクトリを意味する。
    }
  ],
  "liveSassCompile.settings.autoprefix": [
    "> 10%",          // 全体のユーザーの10%以上が使用しているブラウザバージョンに対応
    "last 2 versions" // 各ブラウザの最新2バージョンに対応
  ],
  "liveSassCompile.settings.excludeList": [
    ".vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外
  ],
  "liveSassCompile.settings.generateMap": false, // ソースマップ(.map)ファイルの生成を無効にする。
  "workbench.editor.untitled.hint": "hidden",    // VS Codeの未命名エディタのヒントを非表示にする。
  "liveSassCompile.settings.includeItems": []    // 特定のアイテムをコンパイルに含めるリスト。現在は空。

この設定だと、Sassファイルと同階層にCSSファイルがコンパイルされます。

ソースマップって何？

ここではソースマップ（Map）をfalseにしています。trueだとstyle.css.mapが出力されます。

ソースマップは検証ツールでCSSを見た時に、そのCSSがSassではどこに書かれているか教えてくれるものです。
開発中はtrueにしておき、本番アップロード時には不要なので含めないといった使い方をします。

ファイルが増えるので、デフォルトではfalseにしています。

jsonファイルを触る時に、始めと最後の｛　｝は消さないようにお願いします。