SASS記法とSCSS記法の違い【Sass】 TECH

SassってSASS記法とSCSS記法があるけで、どう違うのか分からない。

そういったお悩みをお持ちの方に向けて、この記事では解説していきます。

Sassとは

「Syntactically Awesome StyleSheet」の略で、CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと

それぞれ使いたい記法にしたい時は、ファイル名を変えます。

SASS記法を使いたい場合は、.sassというファイル名。

SCSS記法を使いたい場合は、.scssというファイル名。

SASS記法は、インデントを利用した書き方が特徴です。

書き方の注意点は下記の通りです。

ファイル拡張子は、「.sass」にする

「{}」の代わりに、インデントを利用する

「;」が不要

「:」の後に半角スペースが必要

書き方の例は下記のような感じ。

SASS

ul
  margin: 10px
  li
    padding: 10px

YAMLというファイル形式と同じように、書き方に厳格な決まりがあり、しかも分かりづらいので、SASS記法を利用する場合には注意しましょう。

コード量がかなり削減できるメリットがある

SASS記法の改良版がこのSCSS記法です。

SCSS記法は、入れ子構造を利用した書き方が特徴です。

書き方の注意点は下記の通りです。

ファイル拡張子は、「.scss」にする

CSSと同じように「{}」を利用する

CSSと同じように書いても問題ない

書き方の例は下記のような感じ。

SCSS

ul{
  margin: 10px;
  li{
    padding: 10px;
  }
}

CSSと似ているので、分かりやすい

2つの記法で大きく違うのは、{}があるかどうかだと思います。

他にも関数の使い方なども変わってきますが、今回はこの位の解説で済ませます。

なお、SASS記法の採用する事はあまりないので、普通はSassと言えば、SCSS記法を使うと思えば良いと思います。

最後にそれぞれの記法のコードを並べておきます。↓

ul
  margin: 10px
  li
    padding: 10px

ul{
  margin: 10px;
  li{
    padding: 10px;
  }
}