CSSプリプロセッサ(Sass)

CSSプリプロセッサとは

CSSプリプロセッサは、素の [[CSS]] にはない便利な記法で書き、ビルド時に通常のCSSへ変換(コンパイル)するツールです。代表格が Sass(サス)で、.scss という拡張子のファイルに書きます。

大規模なCSSは「同じ色コードがあちこちに散らばる」「セレクタの重複が多い」「ファイルが巨大化する」といった問題を抱えがちです。プリプロセッサはこれらを言語機能で解決します。

Sassの主な機能

変数とネスト

$primary: #3b82f6;

.card {
  border: 1px solid $primary;

  .title {
    color: $primary;
    &:hover { text-decoration: underline; }
  }
}

変数 $primary で色を一元管理し、ネスト(入れ子)で親子関係をそのまま表現できます。& は親セレクタを指します。

部品化とミックスイン

// _mixin.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// main.scss
@use 'mixin';
.modal { @include mixin.flex-center; }

@use でファイルを分割して読み込み、@mixin / @include でスタイルのかたまりを再利用できます。[[FlexboxとGrid]] の定型パターンをミックスインにしておく、といった使い方が典型です。

CSS自体の進化との関係

注意したいのは、CSS標準が進化してSassの主要機能を取り込みつつあることです。CSSカスタムプロパティ(--main-color)は変数の役割を果たし、ネスト記法もブラウザ標準で使えるようになりました。また [[Tailwind CSS]] のようなユーティリティファーストの手法が、そもそも「CSSをほぼ書かない」という別解を提示しています。

新規プロジェクトでは「本当にSassが必要か」を検討する価値がありますが、既存プロジェクトでは依然広く使われており、読める・直せることは実務で重要です。

初学者向けポイント

[[Vite]] では npm install -D sass するだけで .scss がそのまま使えます(設定ファイル不要)
ネストは便利ですが深くしすぎると、生成されるセレクタが複雑になり保守しづらくなります。3階層程度までが目安です
まず素のCSSをしっかり理解してから使うと、「何を楽にしてくれているのか」がわかります

関連技術とのつながり

[[CSS]] — Sassの出力先であり、理解の前提
[[Tailwind CSS]] — 「CSSを書かない」方向の別アプローチ
[[Vite]] — Sassのコンパイルを自動で行うビルドツール
[[FlexboxとGrid]] — 定型レイアウトをミックスイン化する対象

Q: CSSプリプロセッサの仕組みとして正しいのはどれ?
- [x] 独自の記法で書き、ビルド時に通常のCSSへ変換する
- [ ] ブラウザがscssファイルを直接解釈して表示する
- [ ] CSSをJavaScriptに変換して実行する
解説: SassなどのプリプロセッサはコンパイルしてCSSを生成します。ブラウザが読むのは変換後のCSSです。

Q: Sassの「&」が指すものはどれ?
- [ ] ルート要素
- [x] 親セレクタ
- [ ] 直後の兄弟要素
解説: ネスト内の&は親セレクタを指し、&:hover のように擬似クラスの指定によく使われます。

Q: 本文で挙げられている「Sassの必要性を再検討すべき理由」はどれ?
- [ ] Sassが有料化されたから
- [ ] Sassはセキュリティ脆弱性が多いから
- [x] CSS標準が変数やネストなどSassの主要機能を取り込みつつあるから
解説: CSSカスタムプロパティや標準ネストの登場で、Sassなしでも同等のことができる場面が増えています。