Sassなのに拡張子が「.scss」の理由
Sass(サース、又はサス）初心者、入門者向けのコンテンツです。
Sassを使い始めの頃、Sassなのになんで拡張子は「.scss」なんだろう？ と思っていました。
後からSassの歴史的背景を知ると、その理由がわかったのでシェアします。
結論：Sassの記法の違い
結論から言うと、Sassの記法（書き方）の違いです。
Sassには記法（書き方）が２つあります。そして記法によって拡張子が違います。
- SASS記法：拡張子「.sass」
- SCSS記法：拡張子「.scss」
この内、現在主流の記法が後者のSCSS記法です。 ネットでSassの情報を検索しても、主流であるSCSS記法の情報が多く表示されます。
これまでに３つのキーワードが出てきました。混乱しないように整理しときます。
- Sass: Sass全般（SASSもSCSSも含む）
- SASS: SASS記法のこと
- SCSS: SCSS記法のこと
なぜSCSS記法の方が主流なのかは、Sassの歴史的な背景があります。
Sassの歴史的背景
Sassは「Syntactically Awesome Stylesheet」の略で、 CSSの機能を拡張した言語として開発されました。
最初に、使われていたのが「SASS記法」です（拡張子は「.sass」）。 SASS記法は次のように記述します。
div
margin: 0
p
margin: 3px
SASS記法の特徴は、インデントで階層を管理する書き方です。
CSSの記法とは結構違いますよね。この記法がくせ者だったのです。
上記のSASS記法と同じように、インデントで管理するプログラム言語には RubyやPythonといった言語があります。 （補足情報：SassはRubyで開発されています）
インデントで管理するプログラム言語(Ruby等） の使用者にとっては書きやすい記法なのですが、
プログラミングをほとんどやらないWebデザイナーや HTML・CSSコーダーの人たちからすると、 「わかりにくい！！！」となります。
ですからSASS記法しかなかった当初、Sassはあまり普及しませんでした。
Sassを普及させるためには、記法をもっと簡単にする必要がありました。 そこで出来た記法が「SCSS記法」です。
SASS記法とSCSS記法を区別するために拡張子も「.scss」となりました。
SCSS記法は次のように記述します。
div {
margin: 0;
p {
margin: 3px;
}
}
波括弧「｛｝」で囲ったり、末尾にセミコロン「;」をつけたりすることで、 よりCSSに近い記述方法になりました。
Sassを使ったことのない人でも「CSSの書き方に似ているから、これならできそう」 と思うのではないでしょうか。
このSCSS記法がプログラミングになじみのない人達にも「わかりやすい」 と評判となり、SCSS記法が出来て以降Sassが広まりました。
現在のようにSassが多くの開発者に広まったのはSCSS記法のおかげとも言えます。
現在の主流はSCSS記法ですから、「Sass」=「SCSS記法」=「拡張子は .scss」という論理になります。
（SCSS記法ではなく、SASS記法で記述する場合は「.sass」と付けます。）
SASS記法で書いている人はいるの？
主流はSCSS記法ですが、SASS記法を支持している方も少なからずいます。
RubyやPythonといった「インデント管理型のプログラム言語」をよく使う人には、 SASS記法の方が書きやすいのかもしれません。
個人で使う場合、どちらを使うかは好みの問題です。ご自分が書きやすい記法を使ってください。
プログラミングにあまりなじみのない方には「SCSS記法」の方が断然わかりやすいと思います。