menu

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

2020年5月18日

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


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には便利な機能がまだまだ沢山ありますので、興味をお持ちの方は是非調べてみてくださいね!

CPTIMES

   

投稿一覧

pagetop