「いまさら聞けないSCSSとSASSの違い」完全初心者向け完全ガイド

いまさら聞けないSCSSとSASSの違い（結論から）

結論から言うと、SCSSとSASSは同じ「Sass」というCSS拡張言語の記法違いです。

• SCSS：CSSに近い書き方（主流）
• SASS：インデントベースの簡略記法（古い・やや上級者向け）

つまり、「機能は同じ・書き方が違うだけ」です。

Sass、SASS、SCSSの３つの言葉の違い

Sassとは（概念）

Sass（Syntactically Awesome Stylesheets）は
CSSを効率的に書くためのプリプロセッサ（拡張言語）です。

特徴

• 変数が使える
• ネストが書ける
• 関数・Mixinが使える
• CSSを自動生成する

SASSとは（記法①）

SASSはインデント構文（古い記法）です。

特徴

• {} や ; を書かない
• Pythonのようにインデントで構造を表現

SCSSとは（記法②）

SCSSはCSS互換の構文（現在の主流）です。

特徴

• 普通のCSSとほぼ同じ
• 既存CSSをそのまま使える

Sassのメリット

開発効率が大幅に上がる

• 変数で色・サイズを管理できる
• コードの再利用が可能（Mixin）
• ネストで構造が分かりやすい

保守性が高い

• 一箇所変更で全体に反映
• ファイル分割（@use / @import）

チーム開発に強い

• コードの統一がしやすい
• コンポーネント設計に向いている

Sassのデメリット

コンパイルが必要

• そのままではブラウザで使えない
• ビルド環境（例：Webpack, Vite）が必要

学習コスト

• CSSだけより概念が増える
• 初心者は最初混乱しやすい

過剰設計になりやすい

• ネストしすぎて逆に読みにくくなることもある

Sassの２つの記法

記法①：SASS（インデント形式）

$color: red

.container
  color: $color
  .item
    font-size: 14px

$color: red

.container
  color: $color
  .item
    font-size: 14px

記法②：SCSS（CSS形式）

$color: red;

.container {
  color: $color;

  .item {
    font-size: 14px;
  }
}

$color: red;

.container {
  color: $color;

  .item {
    font-size: 14px;
  }
}

SCSSとSASSの違いを徹底比較

構文の違い

学習しやすさ

実務での使用率

• SCSS：ほぼ100%（主流）
• SASS：ほとんど使われない

実際のコード例で比較

CSS（通常）

.container {
  color: red;
}

.container .item {
  font-size: 14px;
}

.container {
  color: red;
}

.container .item {
  font-size: 14px;
}

SCSS

$color: red;

.container {
  color: $color;

  .item {
    font-size: 14px;
  }
}

$color: red;

.container {
  color: $color;

  .item {
    font-size: 14px;
  }
}

SASS

$color: red

.container
  color: $color
  .item
    font-size: 14px

$color: red

.container
  color: $color
  .item
    font-size: 14px

SCSSとSASSどちらを選ぶべき？

結論（初心者）

SCSS一択です

理由

• CSSそのまま使える
• エラーが少ない
• 学習コストが低い
• チーム開発で標準

SASSを選ぶケース（例外）

• インデント構文に慣れている
• より簡潔な記述を好む
• 個人開発でのみ使用

SASSとSCSSはどっちがいい？

最終結論

• 実務 → SCSS
• 学習 → SCSS
• 特殊用途 → SASS

まとめ（重要ポイント）

• Sass＝機能（言語）
• SCSS / SASS＝書き方の違い
• 現代の標準はSCSS