Sass(SASSとSCSS)の違い

改めてSassを見ていたときに、いろいろとこんがらがってきそうなので、しっかりともう一度まとめておく。

SassとSASSとSCSS

まず第1に「Sass」がある。単純にSassといえば、「インデント構文」でのCSSを表したものを言う。プログラムのように書いていくことで、効率や保守性を上げることができる。

そのSassで書かれたCSSの種類として、SASSとSCSSがある。

Sassとして最初に出てきたのが、「SASS記法」(.sass)で、そのあとにSassが広く普及するようになったものが「SCSS記法」(.scss)となります。

Sassの良いところ

セレクター、プロパティの記述がネスト(入れ子)となるので、ひと目で分かりやすい、記述量が減る(場合がある)。

スタイルを定義することができ、変数の利用が可能なので、再利用や一括変更がしやすい。

Sassの難しいところ

単純に学習コスト、書き慣れたCSSではなく、他記法で記述するという手間が発生します。(導入時)

複数人での管理ソースの場合やデータ納品時の確認など。納品後はクライアント側で修正をしていきたいなどの場合、担当者がSass利用者ではない場合などを考慮する。

Sassの書き方

SASS(.sass)

こちらは「{}」や「;」を省略します。すっきりした見た目となります。

.div_class 
  background: #ccc
  width: 100px
  margin: 0 auto
  .div_class_in
    width:50px

SCSS(.scss)

SASSとは異なり、インデントを用いた省略型ではなく、入れ子を主にしたCSSとあまり変わらない書き方となります。

.div_class {
  background: #ccc;
  width: 100px;
  margin: 0 auto;
  .div_class_in {
    width:50px;
  }
}