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

公開 :  → 更新 :

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

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

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

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

SCSS と SASS での、表記の違い

DESKTOP
では、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 の方が便利だと思っています。

スポンサードリンク

おすすめの記事♪

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと[email protected]_is_Rです。やかましいわ。 今回の記事は初のWordPre

イラスト描いてみた。「向日葵と女子高生」

まだ本気出してないんじゃない。本気出したけど[email protected]_is_Rです。 努力すればいいってもんじゃないですね。生まれ持ったものがある。 関係ない話はいいとして、今回も前回に引き

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一[email protected]_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 [email protected]_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

Blender

Blenderで3D美少女キャラの作り方。その3(鼻の穴と唇を作る)

Blenderの記事、しばらく書いていませんでしたが再[email protected]_is_Rです。 前回、キャラの目を作り込んでいきました。今回は鼻の穴と唇を作っていこうと思います。 実は、今回からMac

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

[email protected]_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

あなたの前世は猫でしょう!

LINEスタンプを販売しよう。販売の手順や方法。

前は、猫より犬派だったけど、猫を飼いはじめて[email protected]_is_Rです。 今回は、LINEスタンプの販売方法について、記事を書いてみたいと思います。 LINEスタンプは、誰

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

[email protected]_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに


コメントを残す

メールアドレスが公開されることはありません。


Category

Games