【Sass】SCSSの書き方講座！@mixinや@forを使いこなす【ステップアップ編】

この記事は以下の続きの内容となっています。

前回の記事では、SCSSの3つの書き方を覚えました。

前回学んだSCSSの書き方

ネスト構造（入れ子構造）
変数（$変数）
別ファイルの読み込み（@use）

これだけでも十分CSSの作業効率が上がるのですが、さらにレベルアップしていきましょう！

今回の内容

@mixinを使ってプロパティ（と値）のセットを使い回す！
変数の巨大バージョンのようなもので、何度も使うプロパティのセットを１箇所に保管し使い回すことができます。
SCSSでのレスポンシブ対応！
CSSとは少し違ったメディアクエリの書き方を紹介します。
@forを使ってループ処理をする！
プログラマー御用達のループ処理をCSSで可能にします。

サンプルコードの使い方
@mixinでよく使うプロパティを使い回す
SCSSでのレスポンシブ対応の書き方
@forを使って繰り返し量産する
まだまだあるぞSCSS！

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。

それでは本文へ、レッツゴー！

@mixinでよく使うプロパティを使い回す

@mixin（ミクシン、ミックスイン）は、よく使うプロパティセットを保管する入れ物です。

規模のでかい変数のようなものです！わくわくしますね！？

それでは、さっそく見てみましょう！

以下をSCSSファイルにコピペし、コンパイル（CSSに変換）して結果を見てみましょう！

えふぃ

VSCodeユーザーは「Watch Sass」のクリックをお忘れなく！SCSSファイルを上書き保存するだけで自動でコンパイルされます。

@mixin test{
    width: 100%;
    height: 300px;
    background-color: red;
}

.hello{
    @include test;
}

.goodnihgt{
    @include test;
}

コンパイル後のCSSも貼っておきますね。

.hello {
  width: 100%;
  height: 300px;
  background-color: red;
}

.goodnihgt {
  width: 100%;
  height: 300px;
  background-color: red;
}

科学の力ってすげー！

それでは、@mixinの解説に入っていきます。

@mixinで保管して、@includeで呼び出す

もうこの見出し通りです。
@mixinを使って使いまわしたいプロパティセットを保管し、@includeで呼び出します。

書き方は以下のようになります。

/* プロパティセットの保管 */
@mixin ミクシン名{
    // プロパティを自由に入れる
}

セレクター{
    /* プロパティセットの呼び出し */
    @include ミクシン名;
}

これで終わりではありません@mixin！

今回のサンプルだと、幅も高さも色も固定ですよね。

プロパティセットを呼び出すときに、プロパティの値を自由に変更することもできます！

呼び出すときに、プロパティの値を自由に操る

書き方の手順はこのようになります！

ミクシン名の後ろに「($変数名)」をつける
（この($変数名)の部分を「引数（ひきすう）」と呼びます）
値を自由に変えたい部分を「$変数名」にする
「@include ミクシン名(入れたい値)」と書いて呼び出す

それではサンプルを見てみましょう！

@mixin test02($w){
    width: $w;
}

.hello{
    @include test02(500px);
}

ね！？

さらに！変数は「,（カンマ）」で繋ぐことで、複数セットすることができます。

@mixin test03($w, $h){
    width: $w;
    height: $h;
}

.hello{
    @include test03(500px, 300px);
}

ね！？

さらにさらに！変数の後ろに「: 値」とすることで、デフォルト値をセットすることもできます。

@mixin test04($w: 100%, $h: 100%){
    width: $w;
    height: $h;
}

.hello{
    @include test04(500px, 300px);
}

.goodnight{
    @include test04;
}

ね！？@mixinってすげー！

@mixinでプロパティの値を自由に操る方法をあらためてまとめます。

ミクシン名の後ろに「($変数名)」をつける（変数名は自由です）
複数変数を使いたい場合は「($変数名, $変数名2)」
デフォルト値を設置したい場合は「($変数名: デフォルト値)」
値を自由に変えたい部分を「$変数名」にする
「@include ミクシン名(入れたい値)」と書いて呼び出す
デフォルト値を使いたい場合は「(入れたい値)」を省略する

@mixin ミクシン名($変数名: デフォルト値, $変数名2: デフォルト値){
    プロパティ: $変数名;
    プロパティ: $変数名2;
}

セレクター{
    @include ミクシン名(入れたい値, 入れたい値);
    // デフォルト値を使いたい場合
    @include ミクシン名;
}

SCSSでのレスポンシブ対応の書き方

通常のCSSとは異なり、SCSSでは少しだけ特殊な方法でレスポンシブデザインの書き方をしていくことができます。

では、実際に見てみましょう。

$tb:1024;
$sp:599;

@mixin mq($bp){
    @media screen and (max-width: #{$bp}px){
        @content;
    }
}

mq-sample{
    font-size: 2.8rem;
    @include mq($tb){
        font-size: 2.4rem;
    }
    @include mq($sp){
        font-size: 2.0rem;
    }
}

@mediaを@mixinに入れることで使い回しが簡単になり、ブロック単位で@mediaを実行していくことができます。

コンパイルすると以下のようになります。

mq-sample {
  font-size: 2.8rem;
}
@media screen and (max-width: 1024px) {
  mq-sample {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 599px) {
  mq-sample {
    font-size: 2rem;
  }
}

ブロック単位でレスポンシブしたときの値がわかるので、これがすごく見やすい！

※やり方は個人の好みや、会社の方針によりけりなので一例としてご参考に！

それでは、順を追って解説していきます。

SCSSでのレスポンシブデザイン流れ

ブレイクポイントの変数を用意する
変数名もブレイクポイントの数も自由に用意します。
メディアクエリ（@media）用の@mixinを用意する
後ほど解説します。
ブロック毎に必要に応じて呼び出す
後ほど解説します。

それでは「②メディアクエリ用の@mixinを用意する」から見ていきましょう！

@mixin mq($bp){
    @media screen and (max-width: #{$bp}px){
        @content;
    }
}

「mq($bp)」という名前で@mixinを準備し、中身をメディアクエリにすることで、メディアクエリを手軽に召喚できるようにします。

※mqはMediaQuery、$bpはBreakPointの省略です。

@contentと書くことで、@includeで呼び出してからブロックの中身を書いていけるようになります。

これでミクシンの準備は完了！

次に「③ブロック毎に必要に応じて呼び出す」を見ていきましょう。

セレクター{
    // ここにプロパティと値が入る
    @include mq(ブレイクポイント){
        // ここにプロパティと値が入る
    }
}

普通に記述していってもらって、レスポンシブさせたいブロックで、@includeを使ってmq($bp)を呼び出します。

$bpには、最初にセットしておいたブレイクポイントの変数を入れることで、そのサイズでブロック内のプロパティが有効になります。

絶対にブレイクポイントの変数を入れる必要はなく、自由に数字を入れてもOK

CSSとはまた違った方法で、レスポンシブの記述ができるようになりました！

僕は見やすくて好きです。

@forを使って繰り返し量産する

HTML/CSSしか触れていない方にはあまり馴染みがないかと思いますが、その他の言語を使う民にとってforは親のように身近で偉大な存在です。

forは「繰り返し処理」というものをしてくれる方で、一定の法則に従って繰り返し処理を行なってくれます。

偉大な存在ではあるものの、 SCSSでは人によって使用頻度は低いかもしれません。

それでは実際に見てみましょう。

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

さて、この謎の記述が一体どのような結果になるのでしょうか？

コンパイルした結果がこちらです。

.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;
}

す、すすすすすげー！

それでは解説していきましょう！

forの基本的な書き方は以下のようになります。

@for $変数名 from 開始の数字 through 終了の数字{
    // ここに繰り返したい内容を記述する
}

開始の数字から1ずつ順番に、変数の値となり処理をくり返し、終了の数字まで処理を繰り返したら終わり。

という流れになります。

もう一度別の例で、どのような結果になるか予想してからコンパイルしてみましょう！

@for $var from 10 through 13{
    .mb-#{$var}{
        margin-bottom: #{$var}px;
    }
}

from 10 through 13なので、10から1ずつ順番に13まで、変数の値として入っていますね。

これが、繰り返し処理だ！どん！

ちなみに、throughの他にtoを使うこともできます。

from 1 through 10 → 1から10まで繰り返す
from 1 to 10 → 1から9まで繰り返す

さてこのfor、今回の例では汎用的なクラスの量産に使いましたが、アニメーションでも力を発揮してくれます。

きもいアニメーションを用意したので、是非体験してみてください！

index.htmlに以下をコピペします。
CSSファイルのパスは各自調整してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSSのリンク参照先は各自適切なパスに変更 -->
    <link rel="stylesheet" href="./css/style.css">
    <title>SCSSの書き方</title>
</head>
<body>
<div class="animation">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

そしてstyle.scssに以下をコピペしてコンパイルし、結果を見てみましょう！

.animation{
    > span{
        display: inline-block;
        width: 4px;
        height: 20px;
        background-color: black;
        animation: jump .5s infinite linear;
    }
    @for $e from 1 through 20{
        > span:nth-child(#{$e}){
            animation-delay: #{$e * 0.1}s;
        }
    }
}

@keyframes jump {
    0%{
        transform: translateY(0);
    }
    25%{
        transform: translateY(5px);
    }
    50%{
        transform: translateY(0);
    }
    75%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0);
    }
}