最も簡単なScssの使用方法「Live sass compiler」の使い方

Scss（Sass）とは？CSSとの違いとメリットを解説します

Scss（サス）やSass（サス）は、CSSをより効率的に、プログラミングのように記述できるように拡張した言語（プリプロセッサ）です。WEBサイトのスタイル指定に欠かせないCSSですが、大規模になるにつれて記述が長く、管理が難しくなるという課題がありました。Sass/SCSSは、この課題を解決するために生まれました。 CSSを拡張した言語であるため、SassやSCSSで書かれたファイルは、そのままではブラウザで読み込むことができません。最終的には専用のツール（コンパイラ）によって、通常のCSSファイルに変換（コンパイル）してから使用します。

ScssとSass、2つの書き方と主流

Sassには「Sass記法」と「SCSS記法」の2種類があり、両者を総称して「Sass（サス）」と呼ぶこともあります。 Sass記法（.sass）: 波括弧（{}）やセミコロン（;）を使わず、インデント（字下げ）で構造を表す記法です。 SCSS記法（.scss）: 通常のCSSの書き方に近く、波括弧（{}）とセミコロン（;）を使用します。現在では、通常のCSSと互換性が高く学習しやすいSCSS記法（拡張子は.scss）が主流になっています。この記事でもSCSS記法を基本として解説していきます。

CSSとSCSSの主な違いとメリット

SCSSを使う最大のメリットは、通常のCSSにはない「変数」や「ネスト（入れ子）」といった機能が使えるようになり、コードの記述量が減り、保守性（メンテナンスのしやすさ）が向上する点にあります。

特徴	CSS	SCSS	メリット
変数	（限定的）	使用可能	色やフォントサイズなどの値をまとめて管理・変更できます。
ネスト	不可	使用可能	親要素と子要素の関係を分かりやすく記述でき、コードが短くなります。
再利用	不可	Mixin（ミックスイン）などで可能	繰り返し使うスタイルのセットを定義し、必要な場所で呼び出せます。

ネスト機能を使うと、以下のようにHTMLの構造に合わせてCSSを入れ子にして記述できます。

SCSSの記述例

/* SCSS (style.scss) の記述例 */
.header-nav {
  // 親要素のスタイル
  width: 100%;
  padding: 10px 0;
  // 子要素のスタイルをネスト（入れ子）で記述
  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    // さらに子要素のスタイル
    li {
      display: inline-block;
      a {
        color: #333;
        text-decoration: none;
    
        // 疑似要素（:hoverなど）もネストできる
        &:hover {
          color: #007bff;
        }
      }
    }
  }
}

コンパイルされたCSS

/* CSS (style.css) への変換結果 */
.header-nav {
  width: 100%;
  padding: 10px 0;
}
.header-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.header-nav ul li {
  display: inline-block;
}
.header-nav ul li a {
  color: #333;
  text-decoration: none;
}
.header-nav ul li a:hover {
  color: #007bff;
}

SCSSを使うことで、コードが短く、見やすくなり、特にWebサイト制作初心者の方でも構造が把握しやすくなります。

「Live Sass Compiler」とは？利用するメリットと主な機能

Live Sass Compilerは、Web開発で最もよく使われるエディタの一つ「Visual Studio Code（VS Code）」や「Cursor（カーソル）」の拡張機能（プラグイン）です。この拡張機能を使うことで、手動でコマンドを実行しなくても、SCSSファイルを保存するたびに自動でCSSファイルへ変換（コンパイル）してくれます。

Live Sass Compilerを利用するメリット

WEB開発の初心者にとって、環境構築の複雑さは大きな壁になりがちですが、「Live Sass Compiler」を利用することで、複雑な設定なしにSCSSの恩恵をすぐに受けられるのが最大のメリットです。

自動コンパイルによる開発効率の向上: SCSSファイルを保存するたびに自動でCSSが生成されるため、手動でコンパイルする手間が一切かかりません。コードを書いてすぐに結果を確認できます。
環境構築の簡略化: Sassを使うには本来、Rubyなどのインストールが必要な場合がありますが、この拡張機能を使えばVS Codeにインストールするだけで済み、環境構築の手間が大幅に削減されます。
リアルタイムなエラー検出: SCSSの文法ミスがあった場合、コンパイル時にエラーメッセージが表示されるため、すぐに間違いに気づき、修正することができます。

Live Sass Compilerの主な機能

SCSSファイルの自動監視: VS Codeの画面下部にあるボタンをクリックすると、プロジェクト内のSCSSファイルを常に監視し始めます。
CSSファイルへの変換: 監視中にSCSSファイルが保存されると、設定に基づき自動で.cssファイルを生成します。
出力形式の選択: 生成されるCSSファイルのフォーマット（例：コードが見やすいexpanded形式、ファイルサイズを小さくするcompressed形式など）を設定で選ぶことができます。
ソースマップの生成: SCSSの何行目がCSSの何行目に対応しているかを示すソースマップ（.mapファイル）も同時に生成できます。これにより、ブラウザの検証ツールでCSSをデバッグ（問題を発見・修正）する際に、元のSCSSファイル内の該当箇所を特定しやすくなります。

導入はたったの3ステップ！Live Sass Compilerのインストール方法

Visual Studio Code（VS Code）をお使いであれば、「Live Sass Compiler」のインストールは非常に簡単です。以下の3ステップで完了します。

ステップ1：VS Codeの拡張機能タブを開く

まず、VS Codeを起動します。画面左側にあるメニューから、四角いアイコン（拡張機能の管理）をクリックします。

ステップ2：Live Sass Compilerを検索する

拡張機能の検索ボックスに「Live Sass Compiler」と入力します。検索結果の中から、Glenn Marks氏が作成した（アイコンに雷マークが入っていることが多い）「Live Sass Compiler」を探します。

ステップ3：インストールボタンをクリックする

目的の拡張機能が見つかったら、それをクリックし、表示された詳細画面の「インストール」ボタンをクリックします。インストールが完了すると、「インストール」ボタンが「管理」という歯車アイコンに変わります。これで導入は完了です。非常に簡単ですね！

【超簡単】Live Sass Compilerの基本的な使い方と設定方法

インストールが完了したら、実際にSCSSファイルのコーディングを始めてみましょう。

使い方1：SCSSファイルを作成する

プロジェクトフォルダ内に、拡張子が.scssのファイル（例：style.scssなど）を作成し、SCSSのコードを記述して保存します。

SCSSの記述例

/* style.scss */
$main-color: #007bff; // 変数を定義
body {
  font-family: Arial, sans-serif;
}
.button {
  background-color: $main-color;
  color: white;
  padding: 10px 20px;
  &:hover { // ネストと親セレクタ参照 (&)
    opacity: 0.8;
  }
}

使い方2：「Watch Sass」でコンパイルを開始する

SCSSファイルを記述した状態で、VS Codeのウィンドウ右下にあるステータスバーの「Watch Sass」というボタンをクリックします。ボタンが「Watching…」という表示に変わったら、自動コンパイルの監視が開始された状態です。

使い方3：CSSファイルが自動生成されるのを確認する

監視が開始されると、すぐにSCSSファイルと同じフォルダ内に、以下の2つのファイルが自動で生成されます。 style.css: SCSSが変換された通常のCSSファイルです。 style.css.map: ソースマップファイルです。

これで、SCSSファイルを編集して保存するたびに、自動的にstyle.cssが更新されるようになります。

基本的な設定の変更方法（出力場所の変更）

デフォルトではSCSSファイルと同じ場所にCSSファイルが出力されますが、SCSSファイルはsass/フォルダ、CSSファイルはcss/フォルダに分けて管理したい場合が多いです。

この設定は、VS Codeの設定ファイル（settings.json）を編集することで簡単に変更できます。 VS Codeの設定画面を開き、検索窓に「Live Sass Compile」と入力します。「Live Sass Compile: Settings: Formats」の項目の下にある「settings.jsonで編集」をクリックします。

settings.jsonファイル内に、以下の設定を追加（または編集）します。

"liveSassCompile.settings.formats": [
{
  "format": "expanded", // 出力形式：展開（見やすい形式）
  "extensionName": ".css", // 出力ファイルの拡張子
  "savePath": "~/../css/" // 出力先の相対パス。SCSSフォルダの1つ上に戻って（../）、cssフォルダに出力
}
],

上記の例は、SCSSファイルがsass/style.scssにある場合に、css/style.cssとして出力するための設定です。savePathを~/../css/に設定することで、SCSSファイルがある場所から見て一つ上の階層に戻り（../）、そこにあるcssフォルダの中にCSSファイルを出力するよう指定しています。

設定を保存（Ctrl+SまたはCmd+S）すれば、次回コンパイル時からは指定した場所にCSSが出力されます。

つまずきやすいポイント！エラーが出たときの対処法

Live Sass Compilerを使っていて、自動でCSSが生成されなかったり、エラーが表示されたりした場合の一般的な対処法を解説します。

1. 文法エラー（Sass/SCSSの書き間違い）

【原因】 SCSSのコード内に、セミコロン（;）の抜けや、波括弧（{}）の閉じ忘れ、変数名の誤りなどがある場合です。【解決策】 VS Codeの「出力」パネル（画面下部）または「問題」タブに詳細なエラーメッセージが表示されます。エラーメッセージに書かれたファイル名と行数を確認し、該当箇所を修正してください。特にネストやMixin（後述）を使用している箇所は、閉じ忘れがないか注意深く確認しましょう。

2. 監視が停止している

【原因】意図せず「Watching…」ボタンを再度クリックしてしまい、監視状態が解除（「Watch Sass」に戻る）されている場合があります。【解決策】 VS Codeの右下ステータスバーを確認し、「Watch Sass」となっていたら、もう一度クリックして「Watching…」の状態に戻してください。

3. ファイル名・拡張子の問題

【原因】コンパイルしたいファイルの拡張子が.scssではなく、単なる.cssや.txtになっているとコンパイルされません。
ファイル名が〇〇.scssとなっていることを確認してください。また、インポート専用のSCSSファイル（例：変数定義のみのファイル）には、ファイル名の先頭にアンダースコア（_）を付ける（例：_variables.scss）のが一般的です。アンダースコア付きのファイルは、単独ではコンパイルされない設定になっていることが多いため、注意が必要です。

4. 出力フォルダの問題（権限や設定ミス）

【原因】設定したsavePath（出力先）のパスが間違っているか、PCのOS設定などにより、そのフォルダに書き込む権限がない場合があります。

【解決策】 settings.jsonの”savePath”の記述が相対パスとして正しいかを再確認してください。一旦、設定を削除し、デフォルトのSCSSファイルと同じ階層にCSSが出力される状態に戻してコンパイルが成功するか試してみてください。成功すれば、パス設定が原因である可能性が高いです。

【応用編】カスタマイズしてさらに便利に使うための設定

Live Sass Compilerは、初期設定でも十分便利ですが、いくつかの設定をカスタマイズすることで、さらにプロフェッショナルな開発環境に近づけることができます。

1. CSSの出力形式を変更する

開発時と本番公開時で、生成するCSSファイルの形式を使い分けることで、効率とパフォーマンスを両立できます。 expanded (展開): 初期設定の形式です。CSSコードが改行され、インデントもついて非常に見やすいため、開発中やデバッグ（検証）時に適しています。 compressed (圧縮): すべての改行や空白が取り除かれ、ファイルサイズが最小限になります。本番公開時にこの形式でコンパイルすることで、ページの読み込み速度向上に貢献します。

設定ファイル（settings.json）の”format”の値を以下のように変更します。

// 圧縮形式に変更する例
"liveSassCompile.settings.formats": [
{
  "format": "compressed", // ここを変更
  "extensionName": ".min.css", // ファイル名に.minを付けて分かりやすくするのも一般的
  "savePath": "~/../css/"
}
],

2. コンパイル対象から特定のファイルを除外する

SCSSでは、変数やMixinの定義など、他のSCSSファイルから@import（読み込み）されることだけを目的としたファイルを作成することがよくあります。これらのファイル自体はCSSに変換する必要がないため、コンパイル対象から除外（無視）する設定が便利です。ファイル名の先頭にアンダースコア（_）を付けることで除外できますが、さらに特定のファイルやフォルダを確実に除外リストに入れることもできます。

// コンパイル対象から特定のフォルダを除外する例
"liveSassCompile.settings.excludeList": [
  "/node_modules/", // 一般的に使用されないフォルダ
  "/vendor/",
  "/assets/scss/utility/" // 特定のユーティリティフォルダを除外
],

3. ベンダープレフィックスを自動で付与する

一部のCSSプロパティ（特に比較的新しいもの）は、ブラウザの種類（ベンダー）によって特別な接頭辞（ベンダープレフィックス、例：-webkit-, -moz-など）を付けて記述する必要があります。 Live Sass Compilerの拡張機能ではありませんが、Autoprefixer（オートプレフィクサー）などの別の拡張機能やツールを併用することで、SCSSコンパイル後のCSSファイルに、これらのプレフィックスを自動で追加させることができます。これにより、開発者はプレフィックスを意識せずに記述できるため、開発効率がさらに向上します。

4. 案件ごとに設定を分ける（.vscode/settings.jsonの活用）

Live Sass Compilerの設定は、VS Code全体（ユーザー設定）に適用されますが、プロジェクト（案件）ごとに異なるコンパイル設定が必要になることがあります。例えば、プロジェクトAはCSSフォルダに出力し、プロジェクトBはdistフォルダに出力したい場合などです。

このような場合、プロジェクトのルートディレクトリに「.vscode」というフォルダを作成し、その中に「settings.json」ファイルを作成することで、そのプロジェクトだけに適用される設定を指定できます。

settings.jsonの記述内容は、グローバルの設定ファイルと同じです。ここに設定を記述すれば、VS Code全体の設定よりも優先されます。

{
  "liveSassCompile.settings.generateMap": true,//デベロッパーツールでSassをCSSとして表示させる場合true
  "liveSassCompile.settings.formats": [
  {
    "format": "compressed", // 出力されるCSSの形式。"expanded"は通常の読みやすい形式。"compressed"は圧縮された形式。
    "extensionName": ".css", // 出力されるファイルの拡張子。通常は.css。.min.cssなら圧縮
    "savePath": "/wp-content/themes/new-t/css" // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、'/'はルートディレクトリを意味する。
  },
  ],
}

最も簡単なScssの使用方法「Live sass compiler」の使い方

目次

Scss（Sass）とは？CSSとの違いとメリットを解説します

ScssとSass、2つの書き方と主流

CSSとSCSSの主な違いとメリット

SCSSの記述例

コンパイルされたCSS

「Live Sass Compiler」とは？利用するメリットと主な機能

Live Sass Compilerを利用するメリット

Live Sass Compilerの主な機能

導入はたったの3ステップ！Live Sass Compilerのインストール方法

ステップ1：VS Codeの拡張機能タブを開く

ステップ2：Live Sass Compilerを検索する

ステップ3：インストールボタンをクリックする

【超簡単】Live Sass Compilerの基本的な使い方と設定方法

使い方1：SCSSファイルを作成する

SCSSの記述例

使い方2：「Watch Sass」でコンパイルを開始する

使い方3：CSSファイルが自動生成されるのを確認する

基本的な設定の変更方法（出力場所の変更）

つまずきやすいポイント！エラーが出たときの対処法

1. 文法エラー（Sass/SCSSの書き間違い）

2. 監視が停止している

3. ファイル名・拡張子の問題

4. 出力フォルダの問題（権限や設定ミス）

【応用編】カスタマイズしてさらに便利に使うための設定

1. CSSの出力形式を変更する

2. コンパイル対象から特定のファイルを除外する

3. ベンダープレフィックスを自動で付与する

4. 案件ごとに設定を分ける（.vscode/settings.jsonの活用）