SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ！

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。

さて、今回のテーマとなる Sass の表記には、2種類ありますよね。
SCSS と、 SASS です。

この2つは、表記の方法が全く異なります。
括弧の有無、 Mixin や include の書き方の違いなどなど。

では最終的に、この2つはどちらが便利なのでしょうか？

SCSS と SASS での、表記の違い

では、2つの違いを見ていきましょう。

拡張子

まず、一番基本的な部分です。拡張子が違います。
当たり前とか言わないの。

• SCSS の拡張子は、 ファイル名.scss
• SASS の拡張子は、 ファイル名.sass

となります。

入れ子構造（ネスト）

例えば、この様な CSS を作りたかったとします。
かなりシンプルな CSS です。

.article .title {
  color: #222;
}

.article クラスの中にある、 .title クラスの文字の色を変更するものです。
.title は .article に依存していることになります。

（本来、CSSでこの様な依存関係を作るのは、あまり好ましくありません。
詳しくは、BEMによるCSS設計の方法を解説。命名規則から使い方まで。をご覧ください。）

SCSS

こちらが基本の形です。

.article {
  .title {
    color: #222;
  }
}

この様に、括弧{}を使い、入れ子構造にすることで、 CSS の依存関係を示します。
HTML では、 .article の中に .title があることになりますので、 CSS でも、 .article の中に .title があるんだと考えると、分かりやすいですよね。

SASS

括弧ではなく、インデントで依存関係を示します。
また「color: #222」の後ろのセミコロンも省きます。

この時、 color の後ろのコロンの後には、半角スペースを入力する必要があります。

.article
  .title
    color: #222

見慣れないうちは変な気分になりますが、実際に使うと括弧を省略できる分、コーディングが楽になります。
一般的に、見やすさを優先させるならば、表記が CSS に似ているので、こちらの書き方よりも、SCSSの方が見やすいと感じる人が多いのかもしれません。

作り始めた最初は CSS に似ている方が見やすいと感じると思います。
しかし、実際に作っていくと、コードがどうしても長くなってしまうこともあります。

コードは行数が少ない方が、スクロールの手間が省けるため、絶対に見やすくなると思います。
さらに、入力する手間も省けるので、制作スピードを優先させるならばこちらの方が便利と考えられます。

ファイル分けるから長くならないもんとか言わないの。

@mixin & @include

@mixin や @include を使う場合の違いです。
今回作りたいのは、フォントサイズを、 px と rem の両方を表示する Mixin です。

次の様な CSS を作りたいとします。

.article .title {
  font-size: 15px;
  font-size: 1.5rem;
}

いちいち font-size を2つ書くのは大変なので、 Mixin を使って、一発で書き出されるようにします。

SCSS

@mixin rem($size) {
  font-size: $size + px;
  font-size: $size / 10 * 1rem;
}

.article {
  .title {
    @include rem(15);
  }
}

この様にすることで、 rem(15); と入力するだけで、 font-size が、 px と rem の2つが書き出される様になります。
これだけでも便利ですね。

SASS

=rem($size)
  font-size: $size + px
  font-size: $size / 10 * 1rem

.article
  .title
    +rem(15)

こちらでは、 @mixin や @include を、記号で表すことができます。

@mixin が、 = になります。
さらに、 @include が、 + になります。

一瞬、よく分からない記号があるなと思ってしまいますが、記号さえ覚えれば、たったこれだけのコードでも、これだけの文字数を減らすことができます。
コードはもっと長くなるでしょうから、かなり文字数を省略することができると考えられます。

メリット・デメリット

それぞれにメリットとデメリットがありますので、それを以下に記します。

SCSS

メリット

• 表記が CSS に似ている。
• ネストにするので、分かりやすい。
• @mixin や @include など、記号を使わないので、分かりやすい。
• 主流になっているので、情報が多い。

デメリット

• セミコロンや括弧、 @mixin や @include など、入力が多い。
• 最初は見やすいが、作るうちにどんどんコードが長くなり、見にくくなる。
• 括弧をつかうので、括弧の分インデントを揃えるのが少し大変。（ツールを使わない場合）

SASS

メリット

• 括弧を使わない分、行数が短くなる。
• @mixin や @include などは、記号で表すので、入力が楽。
• 括弧を使わない分、インデントを揃えるのが楽。（ツールを使わない場合）
• Pug ( Jade ) を使っている場合、相性が抜群。

デメリット

• インデントを使うので、見慣れないと分かりにくい。
• 記号を使うので、初めて見たときに意味がわからない。
• コロンの後に、半角スペースを空けるなど、決まりがめんどくさい。
• 情報が少ない。

こんなところでしょうか。
私は最終的に、コードが短いに越したことはないと思います。

Pug ( Jade ) を使った場合

おまけ的な内容ですが、 Pug ( Jade ) は、 HTML を書くためのメタ言語です。
SASS は Pug ( Jade ) の表記に似ています。
これが、先ほど相性が抜群と書いた理由です。

以下に、 Pug ( Jade ) を使った例を記述します。

article.article
  header.article__header
    h1 タイトル
  コンテンツ
  footer.article__footer
    フッター

本来、 HTML は、タグで挟むという書き方をしますが、 Pug ( Jade ) では、インデントを使って、階層を表します。
Webサイトを制作する上で、 SASS と Pug ( Jade ) の組み合わせで、私も普段サイトを作っています。

結論

最終的に、どっちを使うと便利なのでしょうか？

実際のところ、現在の主流は SCSS となっております。
使い方を覚えるために、 SASS と検索しても、 SCSS の情報が大半をしめます。

しかし、 表記の違いさえ覚えれば、どちらも同じものです。
ならば、タイプ数の少なくて済む、 SASS を使った方が、効率がよくなるのではないかなと思います。

最終的には自分の好きな方を使うに越したことはないと思いますが、私は SASS の方が便利だと思っています。

• Tweet
• Facebook
• はてブ
• Pocket