Random Circuits
Experiment log

SCSSって結局何？CSSとの違いを実務目線で考える

BUILD / Web制作
2026.09.01 / random_admin

Web制作をしていると、ときどき出てくる「SCSS」。

CSSとは違うものなのか。

結論から言うと、

SCSSはCSSをもっと書きやすくしたもの。

ただしブラウザはSCSSを直接読むことができない。

SCSSを書いたあと、通常のCSSへ変換して使う。

この変換を「コンパイル」という。

CSSだとこう書く

例えばCSS。

.header {
  background: #fff;
}

.header .logo {
  font-size: 24px;
}

.header .logo a {
  color: #000;
}

SCSSではこう書ける。

.header {
  background: #fff;

  .logo {
    font-size: 24px;

    a {
      color: #000;
    }
  }
}

HTMLの構造に近い形で入れ子にできるので、まとまりが分かりやすい。

変数が使える

例えばサイト全体で同じ緑色を使う場合。

$accent: #a7ff14;

.button {
  background: $accent;
}

.marker {
  color: $accent;
}

色を変更したくなったら、

$accent

の値を一箇所変えるだけで済む。

CSSにも現在はカスタムプロパティがあるので同じようなことはできるが、SCSSには他にも便利な機能が多い。

一番のメリットは管理しやすさ

個人的には、SCSSのメリットは「すごいCSSが書けること」ではなく、

CSSが増えたときに管理しやすいこと

だと思う。

小さなサイトなら普通のCSSで十分。

でも、

と増えてくると、CSSはすぐ数千行になる。

SCSSならファイルを分割して管理し、最終的に1本のCSSへまとめることもできる。

SCSSを使わなくても問題ない

一方で、

「Web制作ならSCSS必須」

というわけでもない。

現在のCSS自体もかなり高機能になっている。

小〜中規模サイトなら、CSSだけでも十分きれいに管理できる。

結局重要なのは、

自分やチームが後で読み返したときに分かるかどうか。

SCSSはそのための便利な選択肢のひとつ。

そんな理解で十分だと思う。