1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

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

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

コメントをどうぞ!

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