HOME
本記事は執筆時点（2025年09月01日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つまずいたポイントなどを備忘録としてまとめました。これからSCSSを始める方や、基本的な使い方を再確認したい方の参考になれば幸いです。
SCSSとは？
SCSS（Sassy CSS）は、CSSをより効率的に、そして保守しやすくするための言語です。CSSにはない便利な機能が多数追加されており、以下のような特徴があります。
- 変数を定義できる。
- セレクターを入れ子にして書ける。
- スタイルのまとまりを再利用できる。
- 複数のセレクターで同じスタイルを継承できる。
なお、SCSSで書いたコードは最終的にブラウザが理解できるCSSにコンパイル（変換）しなければ使用できません。
本記事ではVSCodeの拡張機能を使ってSCSSをコンパイルする方法をご紹介します。
具体的な記法や各機能の使い方については別の記事でご紹介します。
SassとSCSS
SassとSCSSは、どちらもCSSをより効率的に書くための言語であり、機能はまったく同じです。唯一の違いは、書き方です。
Sassは従来のCSSと異なり「{}」や「;」を使わない上、インデント（字下げ）によって親子関係を表現するので、ある程度の慣れが必要になります。
一方でSCSS記法は従来のCSSと同じなので、既存のコードをそのまま貼り付けても機能します。
こういった点から、既存のCSS資産を活かしやすく、多くの開発者が使っているため、現在ではSCSSが主流となっているようです。
VSCodeでSCSSをCSSへコンパイル（変換）する手順
本記事ではMicrosoftの無料コードエディタであるVSCodeを用いてSCSSのコードをリアルタイムでCSSへコンパイルする方法をご紹介します。
コンパイルとは、プログラミング言語で書かれた人間が理解しやすいソースコードを、コンピュータが直接実行できる機械語（マシン語）に一括で変換する作業のことです。コンパイルされたコードは、変換前のソースコードなしで単独で実行できるため、高速に動作するのが特徴です。
コンパイルを行うためには、VSCodeの拡張機能である「Live Sass Compiler」をインストールします。
Live Sass Compilerをインストール
VSCodeの左側にある「拡張機能」ボタンをクリックします。（もしくはショートカットキー「Ctrl + Shift + X」）
検索ボックスに「Live Sass Compiler」と入力します。
検索結果の中から「Live Sass Compiler」をクリックします。
「Live Sass Compiler」のインストールのボタンをクリックします。
これで拡張機能「Live Sass Compiler」の機能が使えるようになりました。
SCSSファイルを作成
続いて実際にコンパイルされるかテストしてみます。
プロジェクトの任意の場所にstyle.scssというファイルを作成します。
次の工程でコンパイルを実行すると同じ階層にstyle.cssファイルが生成されます。同名ファイルが存在する場合は上書きされてしまいますのでご注意ください。（あらかじめコピーするかリネームしておいた方が良い）
style.scssの中身には以下のように、変数と入れ子を使ったコードを書きました（詳しい記法については別記事を参照ください）。
コンパイルを実行
ここから「Live Sass Compiler」の機能を使ってコンパイルを行っていきます。
VSCodeのウィンドウの一番下のバーに「Watch Sass」というボタンが新しく追加されているので、こちらをクリックします。
メッセージとともにコンパイルが行われ、緑色のSuccessの文字が表示されたら完了です。
コンパイルが完了するとstyle.scssと同じ階層に「style.css」と「style.css.map」というファイルが出来上がります。
出来上がったstyle.cssを開いてみると、style.scssに記述した変数と入れ子が変換されていることが確認できます。
あとは通常のスタイルシートの読み込みと同じように、このstyle.cssを読み込ませれば完了です。
なお一度「Watch Sass」を実行しておけば、以降はstyle.scssファイルを編集して保存が行われるたびに自動的にcコンパイルが実行され、style.cssが上書きされていきます。
まとめ
以上がVSCodeの拡張機能「Live Sass Compiler」を使ってSCSSをコンパイルする方法です。
普段VSCodeを使っているのであれば気軽にSCSSに触れることができるので是非試してみてください。
