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

こんにちは、現在フリーランスWeb制作者歴6年目のしょーご(@samuraibrass)といいます。

私はSassコンパイルは基本webpackやらGulpなどその時の開発環境に使われているものでコンパイルしていますが、

軽いものなら「Live Sass Compiler」を用いますし、初学者の方の最初のSass導入にもおすすめだと思っています。

今回はVSCodeや上位互換のCursorをお使いの方に向けて、

Live Sass Compilerの初期設定
出力先の設定

これらを解説していきます。

しょーご

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

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

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

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

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

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

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

コーディングを学習中の方はぜひご活用ください。

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

ひとまず課題を見てみる

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編をとりあえず見てみる

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ファイルを触る時に、始めと最後の｛　｝は消さないようにお願いします。