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を取り入れることで、
スタイル管理が一気に楽になります。
