Sassは今も必要？

結論から言うと、Sassを新しく学ぶ優先度は下がりました。理由は単純で、Sassの主な売りだった変数とネストが、素のCSSで書けるようになったからです。

ただし「不要」と「知らなくていい」は別です。既存の案件では今も広く使われているので、.scssを読める状態にはしておきたいところ。この記事では、何が素のCSSに取りこまれ、何がまだSassの独自機能なのかを整理します。

Sassが解決していたこと

Sassは、CSSに足りなかった4つを補う道具として広まりました。

• 変数——色や余白の値に名前をつけて、1か所で管理する
• ネスト（入れ子）——親子関係をそのまま入れ子で書ける
• @mixin——よく使う指定のかたまりを、名前で呼び出して使い回す
• ファイル分割——部品ごとにファイルを分けて、1つのCSSにまとめて書き出す

当時のCSSはどれもできなかったので、規模の大きいサイトではほぼ必須でした。

上の2つは、もう素のCSSでできる

変数（カスタムプロパティ）

:root {
  --main-color: #ff8a3d;
  --space: 16px;
}
.button {
  background: var(--main-color);
  padding: var(--space);
}

Sassの$main-colorにあたるものが、素のCSSの--main-colorです。しかも素のCSSの変数には、Sassの変数にはできないことができます。

• あとから上書きできる——ダークモードやテーマ切りかえで、同じ変数の中身だけを差しかえられます
• JavaScriptから読み書きできる——実行中に値を変えられます

Sassの変数は書き出しの時点で確定して消えるので、この2つはできません。この点では素のCSSのほうが強いというのが、いまの正直な評価です。

ネスト（入れ子）

.card {
  padding: 16px;

  .title {
    font-size: 20px;
  }

  &:hover {
    background: #fff3ea;
  }
}

これは素のCSSです。Sass無しでそのまま動きます。親子関係を入れ子で書けるので、Sassを使う理由がひとつ減りました。

まだSassが強いところ

一方で、素のCSSに入っていない機能もあります。ここがSassを使い続ける理由です。

とくに効くのは@mixinと@eachです。「同じ指定のかたまりを10か所で使う」「色の名前のリストからクラスを20個作る」といった作業は、Sassだと数行で済みます。規模が大きくなるほどSassの価値が上がるという関係です。

.scss を読むときのコツ

既存プロジェクトで.scssに出会ったとき、押さえておくと迷わないものだけ挙げます。

$ は変数

$main-color: #ff8a3d;

.button {
  background: $main-color;
}

素のCSSのvar(--main-color)にあたります。$を見たら「変数だ」と思ってください。

& は「親のセレクタそのもの」

.card {
  &:hover { ... }      // → .card:hover
  &.is-open { ... }    // → .card.is-open
  &__title { ... }     // → .card__title  ← ここが素のCSSに無い書き方
  .title & { ... }     // → .title .card
}

3つめのクラス名の連結だけが素のCSSに無いものです。ここを知らないと「このクラス名はどこで定義されているのか」が追えなくなります。

@include は「かたまりの呼び出し」

@mixin card-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.card {
  @include card-shadow;   // 上のかたまりがここに展開される
}

@includeを見たら、同名の@mixinを探しにいけば中身が分かります。

@use は「他のファイルを読みこむ」

@use 'variables';
@use 'mixins';

ファイル分割の宣言です。_variables.scssのように先頭がアンダースコアのファイルは「単体では書き出さない部品」という意味なので、そこを見れば変数の定義が見つかります。

Sassを使うにはビルドが必要

ここが実務上いちばん大きな違いです。.scssはブラウザが読めないので、CSSに変換する手順が必要になります。

つまり「保存したらブラウザを再読みこみ」だけでは済まなくなり、変換を走らせる仕組みが学習コストとして乗ります。この一手間が、初心者にとってSassをあと回しにしていい理由でもあります。

使う・使わないの判断

「新しく選ぶ理由は減ったが、既存では現役」——jQueryと似た位置です。ただしjQueryと違い、Sassは今も新規で選ばれることがある（大規模で@mixinが効く場面）という点だけ違います。

まとめ

1. Sassの主な売りだった変数とネストは、素のCSSで書ける
2. CSSの変数はあとから上書きできる・JSから触れる——この点ではSassより強い
3. まだSassが強いのは@mixin・@each・&__titleの連結
4. .scssを読むコツは「$は変数、&は親、@includeはかたまりの呼び出し」
5. Sassにはビルドが必要——これが初心者があと回しにしていい理由

道具を増やす前に、素のCSSで書ける範囲を広げるほうが確実に力になります。Sassは、必要になったその日に読み始めれば間に合います。