SCSSの導入方法を初心者向けに解説｜Live Sass CompilerでCSSに変換する手順

2026年5月27日

まず初めに

「SCSSを使いたいけど、最初に何を準備すればいいのかわからない」

自分も最初はここで詰まりました。

SCSSの書き方はなんとなく分かっても、

・どの拡張機能を入れるのか
・どこにSCSSファイルを作るのか
・どうやってCSSに変換するのか

が分からず、手が止まりました。

結論から言うと、初心者はまず Live Sass Compiler を入れて、
scss フォルダと css フォルダを作ればOKです。

SCSSの基本的な使い方はこちらで解説しています。

SCSS入門・使い方を初心者向けに解説｜CSSとの違いと基本の書き方

この記事では、使い方ではなく SCSSの導入方法 にしぼって解説します。

現象の説明

SCSSを使おうとすると、最初に次のような問題が起きます。

・SCSSファイルを作ったけど反映されない
・ブラウザで読み込めない
・CSSファイルが自動で作られない
・Watch Sass がどこにあるか分からない
・scss フォルダと css フォルダの分け方が分からない

SCSSは、そのままではブラウザで読み込めません。

必ず SCSSをCSSに変換する作業 が必要です。

この変換作業を簡単にしてくれるのが、VS Codeの拡張機能
Live Sass Compiler です。

実際に起きたエラー

自分が最初にやったミスは、style.scss を作っただけで満足していたことです。

でも、ブラウザで読み込んでいるのはCSSファイルでした。

そのため、SCSSを書いても画面には何も反映されませんでした。

よくある状態はこれです。

つまり、SCSSを書いてもCSSに変換されていないので、画面に反映されません。

結論（先に知りたい人向け）

SCSSの導入方法は、この流れでOKです。

VS CodeでLive Sass Compilerを入れる
scss フォルダを作る
css フォルダを作る
scss/style.scss を作る
画面下の Watch Sass を押す
css/style.css が自動で作られる
HTMLでは css/style.css を読み込む

ポイントは、SCSSを直接読み込まないことです。

ブラウザで読み込むのは、変換後のCSSファイルです。

原因の詳細

SCSSはCSSを便利に書くためのファイルです。

ただし、ブラウザはSCSSをそのまま理解できません。

そのため、次の流れが必要です。

scss/style.scss
↓
Live Sass Compilerで変換
↓
css/style.css
↓
HTMLで読み込む

つまり、実際にサイトへ反映されるのは style.scss ではなく、
変換後の style.css です。

NGコード

初心者がやりがちなNG例です。

<link rel="stylesheet" href="scss/style.scss">

これはNGです。

SCSSファイルをHTMLで直接読み込んでいます。

なぜダメなのか

ブラウザはSCSSをそのまま読むことができません。

そのため、HTMLで読み込むファイルは必ずCSSにします。

正しくはこうです。

<link rel="stylesheet" href="css/style.css">

SCSSは編集用。

CSSはブラウザで読み込む用。

このように分けて考えると分かりやすいです。

解決方法（ステップ形式）

ステップ①：Live Sass Compilerをインストールする

まず、VS Codeを開きます。

左側の拡張機能アイコンをクリックして、検索欄に次のように入力します。

Live Sass Compiler

表示された拡張機能をインストールします。

ステップ②：CSSフォルダとSCSSフォルダを作成する

次に、プロジェクトの中にフォルダを作ります。

project
├── css
├── scss
└── index.html

役割はこうです。

・scss フォルダ：SCSSを書く場所
・css フォルダ：変換されたCSSが入る場所

初心者のうちは、この分け方で十分です。

ステップ③：scssフォルダにstyle.scssを作る

scss フォルダの中に、style.scss を作ります。

scss/style.scss

まずはテスト用に、以下のように書いてみます。

body {
  background: #f5f5f5;
  color: #333;
}

ステップ④：Watch Sassを押す

style.scss を開いた状態で、VS Codeの画面下を見ます。

そこに Watch Sass という文字が表示されます。

これをクリックします。

すると、SCSSの監視が始まります。

監視とは、SCSSファイルを保存したときに、自動でCSSへ変換してくれる状態のことです。

ステップ⑤：cssフォルダにstyle.cssが作られる

Watch Sass を押すと、CSSファイルが自動で作られます。

project
├── css
│   └── style.css
├── scss
│   └── style.scss
└── index.html

ステップ⑥：HTMLでCSSを読み込む

最後に、HTMLでCSSを読み込みます。

<link rel="stylesheet" href="css/style.css">

ここで読み込むのは、scss/style.scss ではありません。

必ず css/style.css を読み込みます。

結果

これで、SCSSを書いて保存すると、自動でCSSに変換されるようになります。

流れはこうです。

style.scssを書く
↓
保存する
↓
Live Sass Compilerが変換する
↓
style.cssが更新される
↓
ブラウザに反映される

SCSSの導入ができると、次は _const.scss や _mixin.scss を使って、コードをさらに整理できます。

たとえば、

・色を _const.scss にまとめる
・余白を _const.scss にまとめる
・ボタンの共通デザインを _mixin.scss にまとめる

という使い方ができます。

なぜ解決するのか

項目	NGな状態	正しい状態
フォルダ	SCSSとCSSが同じ場所	`scss` と `css` を分ける
編集するファイル	CSSを直接編集	`style.scss` を編集
読み込むファイル	`style.scss` を読み込む	`style.css` を読み込む
変換方法	手動で悩む	Watch Sassで自動変換
管理方法	ファイルが増えると混乱	役割が分かれて見やすい

SCSSは、書くだけでは反映されません。

Live Sass CompilerでCSSに変換して、HTMLではCSSを読み込む。

この流れが分かると、かなり迷いにくくなります。

初心者向けまとめ

SCSSの導入で大切なのは、難しい設定ではありません。

まずは、この3つを覚えればOKです。

・Live Sass Compilerを入れる
・scss フォルダと css フォルダを作る
・Watch Sass を押してCSSに変換する

SCSSは、CSSを書くための便利な下書きのようなものです。

実際にブラウザで使うのは、変換されたCSSファイルです。

よくあるミス

SCSS導入時によくあるミスは以下です。

・Live Sass Compilerを入れていない
・Watch Sass を押していない
・HTMLでSCSSファイルを読み込んでいる
・css フォルダを作っていない
・scss フォルダと css フォルダの役割が混ざっている
・SCSSを保存していない
・作られたCSSファイルを読み込んでいない

特に多いのは、Watch Sass を押し忘れているパターンです。

SCSSを書いてもCSSが変わらないときは、まず画面下の表示を確認しましょう。

今回のポイントまとめ

・SCSSはそのままではブラウザで読めない
・Live Sass Compilerを使うとCSSへ自動変換できる
・VS Codeの画面下にある Watch Sass を押す
・scss フォルダには編集用のSCSSを入れる
・css フォルダには変換後のCSSを入れる
・HTMLでは css/style.css を読み込む

まとめ

今回は、SCSSの導入方法について解説しました。

SCSSの使い方そのものよりも、最初につまずきやすいのは導入部分です。

特に、

SCSSを書く
↓
CSSに変換する
↓
HTMLでCSSを読み込む

この流れを理解することが大切です。

まずはLive Sass Compilerを入れて、scss フォルダと css フォルダを作りましょう。

そして、Watch Sass を押してCSSに変換できれば、SCSSを使う準備は完了です。

コードの書き方は下記記事を参考にしてください。