Sassでfor文を使ったページローダーのようなものを作る方法

##はじめに
Sass記法にはなんとfor文も存在するということで、どういう使い方をするのか一例としてページローダーのようなものをCSSで表現してみたいと思います。
Sassでは他にもif文なんかも使えます。

Sassと言ってますが、基本的にはscss記法で書いていきます。そちらの方が個人的には見やすいので。

この記事ではSassについての詳しい解説は行いません。

##ちなみに
SassMeisterというサイトで、CSSにコンパイルされた記述も同時に見ながらコードを書くことができるので、サクッと書いてみたい場合はこちらが便利です。

左のSassのスペースにSassまたはscss記法で書いていくと、CSSのスペースに表示されます。

##Sassのfor文の記載方法

基本的な書き方

scss

@for $i from 1 through 5 {
  nth-child(#{$i}) {
    animation-delay: -0.3s / $i ;
  }
}

@forでfor文の宣言をし、$iで可変する数字部分の変数宣言を行います。ここまでは一般的なfor文とほぼ変わりません。
from 1``through 5で1〜5までをループするという意味になります。
で、そのnth-child（）のカッコ内に変数宣言をした$iを入れてあげます。
セレクター内や、文字列内に変数を使う場合は#{}で変数を囲む必要があります。
プロパティの値にその変数を使用する場合はそのまま使えます。

scss

@for $i from 1 to 5 {
  nth-child(#{$i}) {
    animation-delay: -0.3s / $i ;
  }
}

ちなみにfrom 1``to 5という書き方をすることもでき、こちらは5を抜いた1〜４までという意味になります。

##ページローダーっぽいやつの作り方
Sassのfor文と、animationプロパティを用いて作っていきます。

さっそくですが、こんな感じのやつです。

See the Pen oNXJRPr by fumu (@fumu238) on CodePen.

以下、簡単な解説。

html

<div class="three-dot">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

htmlは特になんてことないですね。ローダー部分の要素となるdivを4つ作り、親要素の中に入れておきます。

scss

.three-dot {
    text-align: center;

    & div{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: black;
        border-radius: 50%; 
        animation-name: delay;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
    }
}

まず4つの子要素をdisplay:inline-blockで横並びにし、黒い●状にします。
これにあとは動きをつけるために

scss

@keyframes delay {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

@keyframesを使用して指定をしていきます。0%〜100%までの中でどような変化をするか%を指定して細かく指定できます。
ここではtransform:scale()を用いて0%~40%で開いて、あとは閉じる。みたいな動きにします。

animation-nameで@keyframesの名前を指定し、animatino-durationで何秒かけてその動作を行うか指定し、animation-iteration-count: infinite;でそれを無限に行うように指定します。

See the Pen eYNbwvX by fumu (@fumu238) on CodePen.

そうすると、この段階では4つの●が同時にちっちゃくなったり大きくなったりします。
ここでfor文の出番です。

scss

.three-dot {
    text-align: center;

    & div{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: black;
        border-radius: 50%; 
        animation-name: delay;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;

        @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
                animation-delay: -0.4s + $i * 0.1;
            }
        }
    }
}

子要素のdivのn番目にそれぞれCSSを追加するための:nth-childでfor文を作ります。
今回は4つdivがあるので、その1〜3つめにanimation-delayをマイナスの値で設定します。マイナスでdelayを設定すると、delayせずむしろ早く変化を始めることになります。
そしてその設定した値を変数を使って計算すると

ループの1回目は-0.4s + 1 * 0.1 = -0.3s
ループの2回目は-0.4s + 2 * 0.1 = -0.2s ...

となり、数が増えるたびに値が変わっていくことになります。

CSSにコンパイルされるとこう。

css

nth-child(1) {
    animation-delay: -0.3s;
}
nth-child(2) {
    animation-delay: -0.2s;
}
nth-child(3) {
    animation-delay: -0.1s;
}

これで0.1秒ごとに変化をつけることができるようになり、見本のような動きになります。

ちなみに。for文の中で計算を行いましたが、Sassで四則演算を行うときには単位を気にせず計算することができます。
pxなんかも単位をつけたまま計算することができるので、余計な事を考えなくて済みますね。

##おわりに
以上、Saasでfor文を使ったページローダーっぽいものの作り方でした。
他にもtransformを使って回転させたり、丸ではなく四角で作ったり、要素を重ねたりと、いろんなパターンが作れそうです。