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つはどちらが便利なのでしょうか?

目次
  1. SCSS と SASS での、表記の違い
  2. メリット・デメリット
  3. Pug ( Jade ) を使った場合
  4. 結論

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

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

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

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

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキャ

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 Java

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

HTML5とCanvasを使うべ!

HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 ここから

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)しま

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です