Sassなのに拡張子が「.scss」の理由

Sass

Sass(サース、又はサス)初心者、入門者向けのコンテンツです。

Sassを使い始めの頃、Sassなのになんで拡張子は「.scss」なんだろう? と思っていました。

後からSassの歴史的背景を知ると、その理由がわかったのでシェアします。

結論:Sassの記法の違い

結論から言うと、Sassの記法(書き方)の違いです。

Sassには記法(書き方)が2つあります。そして記法によって拡張子が違います。

  • SASS記法:拡張子「.sass」
  • SCSS記法:拡張子「.scss」

この内、現在主流の記法が後者のSCSS記法です。 ネットでSassの情報を検索しても、主流であるSCSS記法の情報が多く表示されます。

これまでに3つのキーワードが出てきました。混乱しないように整理しときます。

  • 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記法」の方が断然わかりやすいと思います。

Sassの公式サイト