SCSSとSASSの違いとは？現役エンジニアが構文・使い分け・将来性まで徹底解説

記事には広告が含まれています

SCSSとSASSの違いを一言でまとめると、同じSass言語の中にある「2つの書き方（記法）」の違いです。SCSSはCSSに近い波括弧ベースの構文、SASSはインデントベースの構文で、書き方が違うだけで、機能やコンパイル結果に差はありません。

この記事では、SCSSとSASSの違いを構文比較・一覧表・コード例で解説します。「どちらを選ぶべきか」の判断基準と、Dart Sass 3.0の最新動向もあわせて紹介します。

「Sass」「SASS」「SCSS」の違いを整理する
SCSSとSASSの構文の違いをコードで比較
- 変数とネスト、SCSSとSASSの違い
- Mixinの書き方、SCSSとSASSの違い
SCSSとSASSの違い一覧表
SCSSとSASSの違いを踏まえて、なぜSCSSが主流なのか
SASS記法のメリット、SCSSとSASSの違いを活かす場面
SCSSとSASSの違いに関係なく押さえたいDart Sass 3.0の変更点【2026年最新】
SCSSとSASSの違いを踏まえた選び方3つの判断基準
SCSSとSASSの違いまとめ
SCSSとSASSの違いでよくある質問（FAQ）

「Sass」「SASS」「SCSS」の違いを整理する

SCSSとSASSの違いを理解するには、まず「Sass」「SASS」「SCSS」という3つの用語の関係を整理する必要があります。

用語	意味
Sass（先頭だけ大文字）	CSSプリプロセッサ言語そのものの名称。「Syntactically Awesome Stylesheets」の略。
SASS（全部大文字）	Sass言語の記法のひとつ。インデントベースで波括弧やセミコロンを使わない。拡張子は`.sass`。
SCSS（全部大文字）	Sass言語のもうひとつの記法。CSSとほぼ同じ構文。拡張子は`.scss`。「Sassy CSS」の略。

つまり、Sassという言語の中にSASS記法とSCSS記法の2つがある、というのが正確な構造です。SCSSとSASSの違いは「言語の違い」ではなく「記法の違い」である点が重要です。

歴史的にはSASS記法が2006年に先に登場し、CSSとの互換性を高めたSCSS記法がSass 3.0（2010年）で追加されました。

SCSSとSASSの構文の違いをコードで比較

SCSSとSASSの違いが最もわかりやすいのは、実際のコードを並べて見ることです。

変数とネスト、SCSSとSASSの違い

SCSS記法（.scss）

$primary-color: #3498db;
$spacing: 16px;

.header {
  background-color: $primary-color;
  padding: $spacing;

  .header__title {
    font-size: 24px;
    color: #fff;
  }
}

SASS記法（.sass）

$primary-color: #3498db
$spacing: 16px

.header
  background-color: $primary-color
  padding: $spacing

  .header__title
    font-size: 24px
    color: #fff

SCSSとSASSの違いは一目瞭然です。SASS記法では波括弧{ }とセミコロン;がなく、インデントだけで階層を表現します。SCSS記法はCSSに変数とネストを足した見た目です。

Mixinの書き方、SCSSとSASSの違い

SCSS記法

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  min-height: 100vh;
}

SASS記法

=flex-center
  display: flex
  justify-content: center
  align-items: center

.container
  +flex-center
  min-height: 100vh

Mixinの構文にもSCSSとSASSの違いがあります。SASS記法では@mixin→=、@include→+と省略記号を使います。タイプ量は減りますが、CSSに慣れた人には読みにくいかもしれません。

重要：どちらの記法で書いてもコンパイル後のCSSはまったく同じです。SCSSとSASSの違いはあくまで記法であり、機能的な差はありません。

SCSSとSASSの違い一覧表

SCSSとSASSの違いを項目ごとに整理した一覧表です。

比較項目	SCSS記法	SASS記法
拡張子	`.scss`	`.sass`
波括弧 `{ }`	必要（CSSと同じ）	不要（インデントで表現）
セミコロン `;`	必要（CSSと同じ）	不要（改行で区切り）
Mixin定義	`@mixin 名前`	`=名前`
Mixin呼び出し	`@include 名前`	`+名前`
CSSとの互換性	高い（CSSをそのまま貼れる）	低い（書き直しが必要）
学習コスト	低い（CSS経験者ならすぐ）	やや高い（独自構文を覚える）
普及率	非常に高い（主流）	低い（情報が少ない）
記述量	やや多い	少ない（簡潔）