SassとSASSとSCSSの違いについて

こちらの記事ではSassの概念的な部分について紹介しました。今回は、Sassでもよく聞くSCSSについて、Sassとは何が違うのか説明したいと思います。

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

Sass

CSSを拡張したメタ言語のこと、詳しくはこちらの記事を参照下さい。

SASS

SASS記法やSASSファイルと書かれていることが多く、Sassの2つの記法のうちの一つです。

SCSS

上記と同じくSCSS記法やSCSSファイルと書かれていることが多く、Sassの2つの記法のうちのよく使われている記法です。

それでは実際にSASSとSCSSの違いをみていきましょう。

Sassの2つの記法

Sassのファイルの拡張子には、.sassと.scssがあります。実は、Sassには2つの記法があり、Sassの中でもそれぞれCSSの書き方が違います。

最初に作られたのがSASS記法(.sass)で、後に作られたのがSCSS記法(.scss)になり、一般的にSCSS記法の方が広く普及しています。

SASS記法

div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;

SASS記法はセレクタやクラスの後に{  }を使わず、また値の後の;を省略します。インデントを主とした簡素な記法です。

SCSS記法

div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}

SCSS記法はネスト(入れ子)を主とした記法で、スタイルの書き方はCSSとさほど変わりません。