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

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

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

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

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

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

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

難しい話は後回し！

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

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

【Sass】SCSSの使い方！VSCodeにプラグインをインストールし環境を整える方法 SCSSとはSassの1種で、簡単に言うと「CSSの上位互換」のようなものです。 SCSSのここがすごい！ CSSの記述が楽にな...

とにかく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>

• 

  ヒトカゲ

• 

  リザード

• 

  リザードン

こんな感じのものを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のほんの一部なんです。

まだまだすごいぞ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などに置き換わります。

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

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

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に読み込ませることはできません。

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

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

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

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

SCSSをやりたくてうずうずしていませんか！？

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

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

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

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

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

やっちゃいますか！SCSS！

【Sass】SCSSの使い方！VSCodeにプラグインをインストールし環境を整える方法 SCSSとはSassの1種で、簡単に言うと「CSSの上位互換」のようなものです。 SCSSのここがすごい！ CSSの記述が楽にな...