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

スポンサードリンク

関連コンテンツ

オススメ記事

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

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

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

scratch

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

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

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

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

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

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

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

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