2016/6/14更新

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

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

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

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

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

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

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

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

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

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

div

margin: 0 auto

padding: 20px

span

font-color: red;

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

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

div {

margin: 0 auto;

p {

padding: 20px;

span {

font-color: red;

}

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

CSS Sass