scssとsassの違いとは？

CSSを書いていると、よく出てくるのが Sass（サス） と SCSS（エスシーエスエス） という言葉です。
名前が似ているので混乱しがちですが、結論から言うと SCSSはSassの書き方の一つ です。

この記事では、「何が違うのか」「どちらを使えばいいのか」を整理して説明します。

---

Sassとは何か

Sassは、CSSをより便利に書くための 拡張言語 です。

CSSでは書けないような、次のようなことができます。

• 変数を使って色やサイズを管理できる

• 共通のスタイルをまとめて再利用できる

• ファイルを分割して整理できる

• 計算や条件分岐のような書き方ができる

つまり、Sassは
「CSSを効率よく、読みやすく、大規模に書くための仕組み」
だと考えると分かりやすいです。

---

SCSSとは何か

SCSSは、Sassの中で最もよく使われている 記法（書き方） です。

特徴はとてもシンプルで、

CSSとほぼ同じ見た目で書ける

という点にあります。

そのため、

• 既存のCSSをほぼそのまま移行できる

• CSSに慣れている人が違和感なく使える

• チーム開発でも理解されやすい

といったメリットがあります。

現在、実務や学習の場面で「Sassを使う」と言われている場合、
実際にはSCSSを使っているケースがほとんど です。

---

sass（インデント記法）とは？

一方で、拡張子が .sass の書き方も存在します。
こちらは インデント記法 と呼ばれています。

この書き方では、

• 波括弧を使わない

• セミコロンを書かない

• インデント（字下げ）で構造を表す

という特徴があります。

記述量は少なくなりますが、

• インデントのミスが起きやすい

• CSSとの見た目の差が大きい

• 初学者には少し分かりづらい

という理由から、現在はあまり使われていません。

---

scssとsassの違いまとめ

ポイントを整理すると、違いは次のようになります。

• Sass
  CSSを拡張した仕組み全体の名前

• SCSS
  CSSとほぼ同じ書き方ができるSassの記法
  現在の主流

• sass（インデント記法）
  インデントだけで構造を書く記法
  今はあまり使われない

---

どちらを使えばいいのか

結論としては、とてもシンプルです。

これから使うなら、SCSS一択 で問題ありません。

理由は、

• CSSの知識がそのまま使える

• 学習コストが低い

• 実務・教材・ネット情報のほとんどがSCSS前提

だからです。

「Sassを使っている」と言いつつ、
実際には SCSSで書いている
というケースがほとんどなので、混乱しなくて大丈夫です。

---

おわりに

scssとsassの違いは、
「機能の差」ではなく 書き方の違い です。

まずは、

SCSS = CSSをパワーアップさせた書き方

と理解しておくと、かなりスッと来ます。

CSSに慣れてきたら、SCSSを取り入れることで、
スタイル管理が一気に楽になります。