初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
HTML/CSS

SCSSとは?CSSの上位互換、SCSSのすごさを初心者コーダーに伝えたい

SCSSとは? CSSの上位互換、SCSSのすごさを知ろう!

普段CSSを触っていて、特に苦になることはないかと思います。

いや別にCSSに不満なんてないけど…。
僕はこんな感じでした。

そう、SCSSに出会うまではね…。

SCSSとは、ものすごく簡単に言うとCSSの上位互換のようなものです。

SCSSのここがすごい!
  • CSSの記述が楽になり、作業効率が爆上がりする
  • 後から見てもわかりやすく、メンテナンス性が高い
  • 記述方法が似ているため、学習コストが低い

本当なら、「SCSSとは、Sassの1種で〜メタ言語で〜」とかそういうの説明しなきゃいけないんでしょうが、そんなことより

とにかくSCSSを見て欲しい!

難しい話は後回し!

これを読み終えたころあなたはSCSSを使いたくてうずうずしているはずです。

すでにうずうずしている方には、SCSSをスタートするための記事も準備しております。

とにかくSCSSを見て欲しい

SCSSとは、CSSの上位互換です。
リザードンとヒトカゲくらい違います。

通常のCSSの記述に加え、さらに新しい記述方法が追加されます。

それでは、見ていきましょう!

こんなhtmlを用意しました。
モンスターボール(ul)にモンスター(li)が入っています。

<ul class="monsterball">
    <li class="monster">
        <img src="https://efilamola.com/uploads/efi.jpg" alt="efilamola">
        <p>ヒトカゲ</p>
    </li>
    <li class="monster">
        <img src="https://efilamola.com/uploads/efi.jpg" alt="efilamola">
        <p>リザード</p>
    </li>
    <li class="monster">
        <img src="https://efilamola.com/uploads/efi.jpg" alt="efilamola">
        <p>リザードン</p>
    </li>
</ul>
  • efilamola

    ヒトカゲ

  • efilamola

    リザード

  • efilamola

    リザードン

こんな感じのものをCSSで作っていきましょう。

.monsterball {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.monsterball .monster {
  margin: 0 1.5%;
  width: 30%;
}

.monsterball .monster img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

.monsterball .monster p {
  margin: 5px 0 0;
  text-align: center;
}

ざっとこんな感じで作りました。

実はこれはSCSSで記述しました。

SCSSファイルはそのままCSSの代わりに使うことはできません。
SCSSで記述したファイルは、CSSファイルに変換してから使います
これについては後で詳しく説明します。

そして見てくださいこれ!
SCSSは自動でベンダープレフィックスを記述してくれます!
すげー!

えふぃ

ベンダープレフィックスは「-webkit-」とか「-ms-」の総称です。

一体SCSSではどのように記述しているのでしょうか?

.monsterball{
    display: flex;
    justify-content: center;

    .monster{
        margin: 0 1.5%;
        width: 30%;

        img{
            margin: 0;
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        p{
            margin: 5px 0 0;
            text-align: center;
        }
    }
}

この記事を読んでいるということは、あまりSCSSの記述に慣れていないかと思います。

でもこれ、直感的にどうやって書いているのか、わかるのではないでしょうか?

SCSSでは、ネスト構造(入れ子構造)で記述していきます。

これがとってもいいんです。

ネスト構造のここがすごい!
  • 親タグを記述しなくていい
  • ブロック単位でひとまとまりができるのでとても見やすい

SCSSでは「img」や「p」としか記述していないのに、
CSSでは「.monsterball .monster img(p)」となっています。

たかだか数文字の違いと感じるかもしれませんが、この差がでかい

またHTMLでの1つのブロックが、SCSSでも1つのブロックになって、これがとっても見やすいんです。

見やすいということは…メンテナンスが楽!

そして忘れた頃にもう一度、scssは自動でベンダープレフィックスを記述してくれます!

あれ!これだけでもう満たしちゃいましたね!

SCSSのここがすごい!
  • CSSの記述が楽になり、作業効率が爆上がりする
  • 後から見てもわかりやすく、メンテナンス性が高い
  • 記述方法が似ているため、学習コストが低い

これ、まだSCSSのほんの一部なんです。

まだまだすごいぞSCSS

SCSSにはまだまだすごい機能が盛りだくさん!
細かい説明は一旦置いといて、ささっと紹介だけしていきます。

変数が使える

さて問題です。
この記述、CSSでどうなるでしょうか。

$mainColor: #61b953;
$monster: hitokage;

.monster-#{$monster}{
    color: $mainColor;
}

正解!
答えはこうなります。

.monster-hitokage {
  color: #61b953;
}

CSSでも変数は使えるのですが、SCSSの方が汎用性が高い変数が使えます。
CSSではセレクタに変数は使えませんからね。

えふぃ

変数とは、何度も使いたい文字をしまっておく箱のようなものです。
モンスターボールみたいですね!

毎回いちいち色コード(#61b953)を記述しなくても、変数に入れておくだけで簡単に使い回すことができます

そして万が一色の変更があったとも、変数に入れた部分を変更するだけで全て一気に色が変わります!

ループ処理が使える

ループ処理が…使える…最高ですね。

えふぃ

ループ処理とは、やりたいことを自動で繰り返してくれる動きのことです。
プログラミングにおいて非常に重要なものです!

@for $e from 1 through 5{
    .mt-#{$e * 5}{
        margin-top: #{$e * 5}px;
    }
}

なんとこの5行が…。

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

すげー!!!

calc()の出番が減る(四則演算が使える)

別の単位同士では使えませんが、SCSSではちょっとした計算ならcalc()が不要になります。

img{
    padding-top: 50px * 0.8;
}

calc()って案外打つのめんどくさいんですよね…。

img {
  padding-top: 40px;
}

よく使うスタイルを何度も使い回せる

SCSSではミックスインと言うものがあります。
よく使うスタイルセットを、何度もまとめて使い回すためのものです。

@mixin content($width: 100px, $height :100px, $top: 0, $right: auto, $bottom: auto, $left: 0){
    content: "";
    display: block;
    width: $width;
    height: $height;
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

.sampleA{
    @include content;
}

.sampleB{
    @include content(50%, 200px, auto, 30px, 40px, auto)
}

「直感的にわかる」からは少し外れてしまったかもしれませんが、非常に便利です。

一度セットを作っておくだけで、何度でも不死鳥のように蘇ります。

.sampleA {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}

.sampleB {
  content: "";
  display: block;
  width: 50%;
  height: 200px;
  position: absolute;
  top: auto;
  right: 30px;
  bottom: 40px;
  left: auto;
}

複数のファイルを1つにまとめて圧縮することができる

CSSで複数のファイルを作成した際、HTML側からそれぞれを読み込まなければいけません

SCSSでは、複数のファイルを1つのCSSにまとめることができます。

この4つのファイルが…。

1つに!!!!

※@importは2022年10月に廃止となり、@useなどに置き換わります。

メリット
  • HTMLで読み込むファイルを減らすことができる
  • 自分の好きなようにファイルを分割することができ、メンテナンスが楽ちんに

そしてさらにさらに、圧縮してファイルサイズを小さくすることもできます!

至れり尽くせりですね…。

SCSSのメリットはまだまだあるのですが、ひとまずこの程度におさえておきましょう。

SCSSにもデメリットはあるんでしょう?

さて、さんざん褒めてきたSCSSですが、一応デメリットはあります。

SCSSのデメリット
  • 最初に少しだけ環境設定が必要
  • CSSに直書きした内容は、SCSSで上書きすると消える
  • チームで製作する場合全員がSCSSを知っておく必要がある
  • SCSSファイルでクラス名を検索しても引っかからない場合が多々ある

実際のところデメリットはかなりしょぼいです。

環境設定といっても、VScodeの場合プラグインをダウンロードしてちょちょっと設定を触るだけです。

2つ目についてですが、間違ってCSSファイルに直書きしてしまった場合、あとからSCSSファイルで上書き保存すると、直書きした記述が消えます。
ですがSCSSは隠れているわけではないので、ほぼ問題なしです。

4つ目の検索については、個人個人のクラス命名規則によります。
SCSSでは長いクラス名を省略しながら記述していけるので、クラス名をフルネームで検索しても引っかからないことが多々あります。

にしても、デメリットに対するメリットの大きさが尋常じゃないです。

ここまできたところで、SCSSとは?
後回しにしたSCSSについて、さらっと学んでいきましょう。さらっと。

SCSSとは?

最初に書くべきことなのでしょうが、後回しにしてすみません。
先にSCSSの素晴らしさをみんなに伝えたかったので…。

SCSSとは、Sassの一種です。

Sassとは、CSSの機能を拡張したスタイルシートのことです。

そしてそのSassには、SASSとSCSSの2種類あります。
簡単にいうと、この2つの違いは流派の違いのようなもので、記法や拡張子が異なります。

CSSファイルの結果は同じです。

SCSSの方がわかりやすく、使用人口が多く、情報量も多いため、本記事ではSCSSを扱っています。

SCSSはCSSに変換してから使う

SCSSは.scssという拡張子のファイルを作成し、そこに記述していきます。

ただ、SCSSファイルをそのままHTMLに読み込ませることはできません。

流れ
  1. style.scssを作成し、記述していく
  2. style.scssをコンパイルし、style.cssに変換する
  3. HTMLファイルにstyle.cssを読み込ませる

コンパイルとは、簡単にいうと翻訳みたいなものです。
SCSS語をHTMLさんでも理解できるCSS語に翻訳します。

何か難しそうにも感じますが、コンパイルは自動で行われるので楽勝です。

さあ、みんなもSCSSを使おう!

さて、いかがでしたでしょうか。

SCSSをやりたくてうずうずしていませんか!?

SCSSとは、CSSの上位互換です。

SCSSのここがすごい!
  • CSSの記述が楽になり、作業効率が爆上がりする
  • 後から見てもわかりやすく、メンテナンス性が高い
  • 記述方法が似ているため、学習コストが低い

具体的には、こんなことができます。

  • ネスト構造
  • 自動でベンダープレフィックス記述
  • 変数
  • ループ
  • 四則演算
  • ミックスイン
  • ファイル一元化&圧縮

デメリットはミジンコ程度なので、やらない手はありません。

CSSは、できあがったデザインをウェブサイトで再現するための作業にすぎません。

作業は、効率よく素早く楽に終わらせたいですよね。

やっちゃいますか!SCSS!

今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。