2026-10-12訂正：CSSの完全互換という説明とlighten例を訂正し、CSSへのコンパイル前提を補いました。
いまさら聞けないSCSSとSASSの違い 🧐✨
こんにちは！今回は、CSSを効率的に書くための拡張言語「Sass」の中でも、「SCSS」と「SASS」の違いについて解説します。「どっちを使えばいいの？」「何が違うの？」と疑問に思っている方に向けて、図や絵文字を交えながら分かりやすく説明していきます！📚
Sassとは？🖌️
Sass（Syntactically Awesome Stylesheets）は、CSSをより効率的に記述できるようにするためのスタイルシート言語です。
そして、Sassには2つの記法があります：
- SCSS記法（.scss）
- SASS記法（.sass）
つまり、「SCSS」と「SASS」はどちらもSassの一部であり、記述方法が異なるだけです。
公式ドキュメントはこちら👇
Sass公式サイト
SCSSとSASSの違いを徹底比較！🔍
以下の表で、SCSSとSASSの主な違いを確認してみましょう。
| 特徴 | SCSS（.scss） | SASS（.sass） |
|---|---|---|
| 構文 | CSSに似た構文。セミコロン ; や波括弧 {} を使用。 |
インデントベースで簡潔な記述。セミコロンや波括弧は不要。 |
| 可読性 | CSSとほぼ同じなので初心者にもわかりやすい。 | 簡潔だがインデントミスに注意が必要。 |
| 拡張子 | .scss |
.sass |
| 互換性 | 少数の例外を除きCSSのsuperset。完全互換ではない。 | CSSとは異なる構文なので移行には書き換えが必要。 |
| 普及度 | 現在はこちらが主流。 | 限定的な利用。 |
実際のコード例で比較 🖋️
SCSS記法（CSSライク構文）
CSSとほぼ同じ構文で記述します。
@use "sass:color";
$primary-color: #3498db;
button {
padding: 10px 20px;
background-color: $primary-color;
&:hover {
background-color: color.adjust($primary-color, $lightness: 10%, $space: hsl);
}
}
SASS記法（インデントベース構文）
インデントベースで簡潔に記述します。
@use "sass:color"
$primary-color: #3498db
button
padding: 10px 20px
background-color: $primary-color
&:hover
background-color: color.adjust($primary-color, $lightness: 10%, $space: hsl)
SCSSとSASS
どちらを選ぶべき？🤔
SCSSがおすすめな場合
- CSSに慣れている初心者。
- チーム開発や既存プロジェクトとの互換性を重視する場合。
- 学習コストを抑えたい場合。
SASSがおすすめな場合
- コードを極力簡潔に書きたい場合。
- インデントベースの記法（Pythonなど）が好きな場合。
まとめ 📝
- SCSSとSASSはどちらもSassの一部であり、機能的な違いはありません。
- SCSSはCSSに似た構文で初心者にも扱いやすく、現在では主流となっています。
- SASSはインデントベースで簡潔なコードを書けますが、慣れが必要です。
これから学び始めるなら、まずはSCSSから始めることをおすすめします！😊
質問やフィードバックがあれば、お気軽にコメントしてくださいね！ 🎉
この記事を書いた人✏️@YushiYamamoto
ITPRODX.com代表 / AIアーキテクト
Next.js / TypeScript / n8nを活用した自律型アーキテクチャ設計を専門としています。
日々の自動化の検証結果や、ビジネス側の視点（ROI等）に関するより深い考察は、以下の公式サイトおよびnoteで発信しています。
コンパイルと非推奨関数
ブラウザは.scss/.sassの変数やmixinを直接実行しません。導入済みのDart Sass/ビルド環境でCSSへコンパイルしてHTMLから読み込みます。二つの記法は機能が同等で、チーム/既存コードに合わせて選びます。「SASS」は本文でインデント記法を指しますが、Sass全体の名前と混同しません。
旧lightenはDart Sass 1.79.0以降非推奨です。上の例はsass:colorのcolor.adjustでHSL lightnessを10 percentage points増やす指定に変更し、相対割合で明るくするcolor.scaleとは区別しました。syntax・color関数変更
2026-10-12に一次資料を確認。ローカルにSass compilerを確認できず、SCSS/Sassの実コンパイル・生成CSS/画面/互換は未検証です。掲載コードは静的読取のみで、コンパイル成功を報告するものではありません。