Sass、SASS、SCSS。似たような名前が並んでいて混乱しやすいので、違いを整理します。
Sass・SASS・SCSSはどう違う？
SassがCSSプリプロセッサの名前で、その中に2つの書き方（構文）があります。
| 名前 | 拡張子 | 概要 |
|---|---|---|
| Sass | — | プリプロセッサ全体の名前 |
| SASS記法 | .sass | インデントベースの省略記法。古い方 |
| SCSS記法 | .scss | CSSと互換性のある記法。現在の主流 |
SASS記法（.sass）
波括弧{}やセミコロン;を省略し、インデントで構造を表す。
.container
background: #ccc
width: 100px
margin: 0 auto
.inner
width: 50pxすっきりした見た目だが、CSSとは記法が異なるので慣れが必要。
SCSS記法（.scss）
CSSとほぼ同じ書き方で、ネスト（入れ子）や変数などのSass機能が使える。
.container {
background: #ccc;
width: 100px;
margin: 0 auto;
.inner {
width: 50px;
}
}既存のCSSファイルがそのまま有効なSCSSファイルになるので、導入ハードルが低い。
SASS記法とSCSS記法、どちらを使うべき？
SCSS記法が圧倒的に主流。理由は：
- CSSとの互換性がある（既存CSSをそのまま使える）
- 情報が多く、学習しやすい
- ほとんどのフレームワーク・ツールがSCSSをデフォルトサポート
SASS記法を使うケースは少なく、新規プロジェクトでは基本的にSCSSを選んで問題ありません。
2026年、Sassはまだ必要？
Sassが登場した当時に比べて、CSS自体が大幅に進化しています。
CSSネイティブで使えるようになった機能
| 機能 | CSS | Sass |
|---|---|---|
| 変数 | var(--color) | $color |
| ネスト | CSS Nesting（主要ブラウザ対応済み） | &セレクタ |
| 計算 | calc() | 算術演算 |
| カラー関数 | color-mix() | lighten() / darken() |
特にCSSネイティブのネスト機能が2023年以降に主要ブラウザで対応したことで、「ネストのためだけにSassを使う」必要性は減りました。
それでもSassが有効な場面
- 大規模プロジェクトでのファイル分割（
@use/@forward） - mixin・関数の再利用
- 条件分岐やループが必要な場合
- 既存のSCSSコードベースの保守
まとめ
- Sass = プリプロセッサの名前
- SASS = インデント記法（
.sass）。今はあまり使われない - SCSS = CSS互換の記法（
.scss）。こちらが主流 - 2026年現在、CSSネイティブ機能の進化でSassなしでもいける場面が増えたが、大規模プロジェクトではまだ有用