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

今回は 「Sassってなんだろう？」という方に向けて、
Sass、SASS、SCSS の違いにスポットを当てて基本要素をお伝えします。

Sass

• Sassは、CSSを拡張した言語で SASS と SCSS の2種類の記述方法があります。

SASS

• SASSは、Sassの記述方法のうちの一つです。SASSの記述方法は、セミコロンやカッコを使用しません。

SCSS

• SCSSは、Sassの記述方法のうちの一つです。SASSよりもSCSSの方が主流とされています。
  SCSSの記述方法はCSSと似ているため、CSSを書いたことがあるとSass初心者でも直感的にコーディングできると言われています。

SASS と SCSS の違い
SASS と SCSS には記述方法が異なること以外、特に違いはありません。
両者の違いをまとめると次のようになります。

• ・記述方法が異なる
• ・拡張子が異なる
•    ⇒ SASS の拡張子：ファイル名.sass
•    ⇒ SCSS の拡張子：ファイル名.scss

次に、SCSSとSASSの記述例を見ていきましょう。
SCSSはネスト(入れ子)でコードを書ける点が特徴です。SASSはセミコロンやカッコを使用しないため、慣れていないと分かりにくいというデメリットがあります。

SCSS の記述例
ul {
    margin: 0;
    padding: 0;

    li {
        margin: 0;

        a {
            display: block;
        }
    }
}

■SCSS のメリット

• ・記述方法がCSSに似ている
• ・ネスト(入れ子)で書けるため、直感的で分かりやすい
• ・使用者が多いため、解説しているWebサイトが多い

SASS の記述例
ul
    margin: 0
    padding: 0

    li
        margin: 0

        a
            display: block

■SASS のメリット

• ・セミコロンやカッコを使用しないため、コード量が少なくなる

まとめ
Sass、SASS、SCSSの違いについてイメージできたでしょうか。
SassはCSSの弱点を補うために開発された言語です。SassはCSSよりも可読性が良くなっているため、メンテナンス性や生産性を向上させることができます。

Sassには便利な機能がまだまだ沢山ありますので、興味をお持ちの方は是非調べてみてくださいね！