【基礎知識】Sass(SCSS)とは？ メリットとデメリットを解説
この記事の要約 SassはCSSのコードの開発効率を上げるためのものです。メリットはコードを管理する保守性が格段に上がります。デメリットは書いたコードをCSSに変換してから使う必要があります。
Sass（サス）はCSSの拡張言語で、Sassには2つの記方があります。この記事で解説する「SCSS記法」と、ここでは詳しく触れない「インデント記法」という記法です。
インデント記法とSCSS記法について
インデント記法とSCSS記法はどちらもCSSを効率的に記述するためのものです。書いたコードはそのままではブラウザが理解できません。そのため通常のCSSファイルに変換する必要があります。この変換作業のことをコンパイルと呼びます。
それぞれの拡張子は以下の通りです。拡張子は分かりやすいように緑色で大きく表示しており、全て小文字です。
- SCSS記法: .scss
- インデント記法: .sass
この拡張子のファイルを作成し、最終的に通常の .css に出力してWebサイトで読み込ませて使います。
SassはWebサイト制作者の必須知識か？
結論から言うと、SassはHTMLやCSSを策定している組織の公式規格ではないため、Webの仕組みとして絶対になくてはならない「必須知識」ではありません。
しかし、実際のWeb制作の現場では広く採用されています。そのためSassを使っているライブラリのカスタマイズやSassを採用しているWebサイトで保守や開発ができるようになります。
また、近年のWeb開発ではNode.js環境（ViteやWebpackなど）を利用することが多くなりました。これらのビルドツールを使う際、Sassのコンパイルも自動化されることが一般的で、開発者は変換の手間を意識することなく、自然とSassを利用する環境が整っています。
インデント記法ではなく、SCSS記法を学ぶと良い理由
冒頭で記法は2つあるとお伝えしましたが、これから学ぶなら断然「SCSS記法」をおすすめします。 僕自身の経験としても、インデント記法だけで書かれたプロジェクトに参加したことはありませんが、SCSS記法のプロジェクトはよくありました。
それぞれの違いをコードで見てみましょう。
インデント記法のサンプル
インデント記法は、波カッコ {} やセミコロン ; を使わず、インデント（字下げ）だけで構造を表現します。Pythonなどの言語に似ていますが、通常のCSSに慣れていると少し見づらいと感じるかもしれません。
$primary-color: #222
body
background-color: $primary-color
font:
size: 16px
SCSS記法のサンプル
一方、SCSS記法はCSSと同じように波カッコを使います。コードの区切りが明確で見やすくなります。JavaScriptや、通常のCSSを勉強したことがある方なら、こちらの方が違和感なく入れるでしょう。
$primary-color: #222;
body {
background-color: $primary-color;
font: {
size: 16px;
}
}
SCSSのメリット
ここからは僕が実際に開発で感じたメリットを素直にお伝えします。
コードの可読性が上がる
VSCodeなどのエディタでSCSSを表示すると、入れ子（ネスト）になっている波括弧{}の色が変わったりして、コードの構造が視覚的にとても分かりやすくなります。
修正などの保守性が圧倒的に楽になる
僕は2023年に初めてSass(SCSS記法)に触れました。当時の会社の先輩から「Node.jsを使うプロジェクトがあるから習得しておいて」と言われたのがきっかけです。 最初は「慣れないし、環境構築も手間で、普通のCSSだけで書いてもいいじゃないか」と思っていました。そこまで利便性を感じていなかったのです。
しかし、一度その構文に慣れてしまうと、もう元には戻れないほど便利で、今では個人のサイトでも必ずSassを使っています。
SCSSの一番の利点は可読性が上がり、CSSの保守（修正や変更）がしやすくなることです。 例えば、深い階層にある要素にスタイルを適用する場合、普通のCSSだと以下のように親要素を何度も繰り返して書く必要があります。
通常のCSSの場合:
div { width:100%; }
div > div { width:50%; }
div > div > p { padding:1em; }
div > div > p > span { color:blue; }
div > div > p > span > span { color:red; }
これがSCSSだと、以下のようにすっきりと記述できます。
Sass(SCSS記法)の場合:
div { width:100%;
> div { width:50%;
> p { padding:1em;
> span { color:blue;
> span { color:red; }
}
}
}
}
上記Sassをコンパイルするとその上の「通常のCSSの場合」のコードが出力されます。
どの位置（どの親要素の中）にスタイルが適用されるのかが、見た目にも明白ですよね。CSSのように、セレクタを何度も書く必要がありません。 最初は学習コストがかかるかもしれませんが、その後の作業効率というリターンが非常に大きいので、ぜひ習得してほしい技術です。
対応できるプロジェクトが増える
Sassを使えるようになると、対応できる仕事の幅が確実に広がります。 広範囲で使われている技術なので、必須スキルとして求められるプロジェクトも少なくありません。実際に僕も、現場に入ってみて「ここも、あそこもSassが使われているんだ」と実感しました。
Sassのデメリット
もちろん良いことばかりではありません。僕が感じているデメリットも正直にお伝えします。
多少学習コストがかかる
Sassは、変数や関数、演算などプログラミングのような機能を持っています。 これらを本当に使いこなして「保守性の高いコード」を書こうとすると、それなりの学習コストがかかります。「どう書けば後で修正しやすいか」を考えながらコーディングする必要があるため、慣れるまでは少し時間がかかるでしょう。
コンパイル環境が必要
Sassの最大の壁はここかもしれません。 HTMLやCSS、JavaScriptのように「メモ帳一つあればすぐに始められる」わけではありません。SassをCSSに変換（コンパイル）するための環境が必要です。 VSCodeを使うなら拡張機能（Live Sass Compilerなど）を入れたり、Node.js環境ならビルド設定を行ったりする必要があります。
【2025年版】今のCSSとSassの関係
依然としてSassは広く使われています。理由は主に2つです。
便利な機能がまだSassに多い
ループ文や関数、mixin（スタイルの使い回し）など、少ないコードでCSSを多く出力したいサイト管理者はSassの恩恵を強く受けます。
古い環境への安全性
2023年から登場したCSS標準のネスト機能は、未対応のブラウザでは動かないです。しかし、Sassならネストで書いてもコンパイル時に「従来のCSS」に変換してくれるので、ユーザーの環境を気にせず書き方ができます。
【余談】僕がSassに勘違いしていたところ
SassはコンパイルしてCSSにするからコンパイルツールのバージョンによって最新のCSSに対応していないプロパティもあると思っていましたが、これは間違いで最新のCSSにもSassのコンパイラはただの文字列とみてそれをそのまま出力し、結果的に適切な最新のCSSのコードとして出力されます。
Sass(SCSS)で未対応のプロパティを出力する実験
ここではVSCodeと拡張機能のLive Sass Compilerを使って未対応のプロパティを想定して出力します。senagaとkazuという想定外のプロパティとこれまたmlとcountという未知の単位を書きました。僕の予想ではエラーになると思っていました。
SCSSのコード
section {
senaga: 2ml;
div {
kazu: 123count;
}
}
結果はエラーにはならず、コンパイルが通ったら想定しているCSSの形に展開されました。
出力されたCSS
section {
senaga: 2ml;
}
section div {
kazu: 123count;
}
VSCodeでは黄色の波線で不明なプロパティと警告と表示されましたが、僕が想定していなかった正しい結果が出力されました。技術的な進歩が早いIT技術でこの設計はあらゆる想定外のものに柔軟に対応できることが分かりました！