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

menu

カテゴリー：スタッフブログ

2020年5月18日

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

Sass

SASS

SCSS

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

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

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

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

li {
margin: 0;

        a {
            display: block;
        }
    }
}

■SCSS のメリット

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

li
margin: 0

a
display: block

■SASS のメリット

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

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

投稿一覧

コーディングパックのメールマガジン