フロントエンド - CSS・スタイリング

Sass（Syntactically Awesome Style Sheets）さす

CSSプリプロセッサSCSS変数ネストミックスイン

Sassについて教えて

簡単に言うとこんな感じ！

CSSをもっと賢く書けるようにした「CSS強化版ツール」だよ！　変数が使えたり、繰り返しをまとめて書けたりして、大規模なスタイルでも管理しやすくなるんだ。最終的には普通のCSSに変換されるから、ブラウザにもそのまま届くってこと！

Sassとは

Sass（Syntactically Awesome Style Sheets） は、CSSを拡張したCSSプリプロセッサ（あらかじめ処理しておくツール）の一種です。通常のCSSでは書けない「変数」「ネスト（入れ子）」「関数」「継承」などの機能を使って、より効率的・保守性高くスタイルを記述できます。記述したSassファイルは、ビルド時に標準のCSSへコンパイル（変換）されてブラウザに届きます。

Sassには SCSS記法（.scss）と インデント記法（.sass）の2つの書き方があり、現在は中括弧{}とセミコロン;を使うSCSS記法が主流です。CSSの文法と互換性があるため、既存のCSSファイルをそのまま.scssにリネームしても動作するのが特徴です。

Webサイトのデザインが複雑になるにつれ、CSSは数千行に膨れ上がることも珍しくありません。Sassを使うことで、色・フォントサイズなどを変数で一元管理したり、同じスタイルのかたまりをミックスイン（mixin）として再利用したりでき、チーム開発でのメンテナンス性が大幅に向上します。

Sassの主な機能と仕組み

機能	概要	例
変数（Variables）	色やサイズを`$変数名`で定義して使い回す	`$primary: #3b82f6;`
ネスト（Nesting）	セレクターを入れ子で書いて構造を明確に	`nav { ul { ... } }`
ミックスイン（Mixin）	スタイルのかたまりを定義・呼び出し	`@mixin flex-center { ... }`
継承（Extend）	別セレクターのスタイルをそのまま引き継ぐ	`@extend .btn;`
演算（Operations）	数値・色の計算が可能	`width: 100% / 3;`
パーシャル（Partial）	ファイルを分割して管理（`_`始まり）	`_variables.scss`
関数（Functions）	独自の関数を定義してロジックを再利用	`@function rem($px) { ... }`

覚え方：「さっさとCSSを片付けるSass」

「Sass＝サッサと片付ける」と覚えると◎。繰り返し・コピペだらけのCSSを、変数やミックスインでサッサとまとめてしまうのがSassの役割です。

SCSS記法 vs インデント記法（旧Sass記法）

【SCSS記法（現在の主流）】           【インデント記法（旧来）】
$color: #3b82f6;                    $color: #3b82f6
.button {                           .button
  color: $color;                      color: $color
  &:hover {                           &:hover
    opacity: 0.8;                       opacity: 0.8
  }
}

歴史と背景

2006年 — Hampton Catlin が Ruby 実装として Sass を公開。当初はインデント記法のみ
2009年 — SCSS記法（Sassy CSS）を導入。CSSとの互換性が生まれ普及が加速
2013年 — LibSass（C++実装）が登場。Ruby 依存を排除し、他言語との連携が容易に
2016年頃 — Node.js 上で動く node-sass（LibSassのNode.jsバインディング）が普及。フロントエンドビルドツールと統合しやすくなる
2020年 — Dart Sass が公式推奨実装になる。LibSassはメンテナンスモードへ移行
2022年〜 — @use / @forward による新しいモジュールシステムが標準化。旧来の @import は非推奨に
現在 — Vue.js・React・Next.js などのモダンフレームワークと組み合わせて広く使われている

CSSとSassの比較・変換フロー

Sassは最終的に普通のCSSに変換されます。下図はSassファイルからブラウザへ届くまでの流れと、CSSとの記述比較をまとめたものです。

主なCSSプリプロセッサの比較

ツール	特徴	記法	現在の普及度
Sass / SCSS	最も歴史が長く機能豊富	SCSS / インデント	◎ 非常に高い
Less	JavaScriptで動作、学習コストが低い	CSS互換	△ 減少傾向
Stylus	柔軟な記法、Node.js製	独自	△ 少数派
CSS Modules	CSS自体をモジュール化（プリプロセッサではない）	CSS	○ React等で普及
CSS Custom Properties	ブラウザネイティブの変数機能	CSS	○ モダンブラウザ対応

💡 最近のトレンド：CSS Custom Properties（CSS変数）の普及により、変数管理だけならSass不要な場面も増えています。ただし、ミックスイン・ループ・パーシャルなど複雑な管理が必要な大規模プロジェクトではSassが依然として有力な選択肢です。