Sassでループ処理

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Sassでループ処理をする方法

■ 目次
・右にずらす
・回転させつつ右にずらす
・色相を変える
・グラデーションをつける
・if文を使って不規則な動きをつける
・for文を使ってふわっとアニメーション

## 例① 右にずらす

黄色いボックスが5つあります。ループ処理を使って2個目以降を右にずらしてみます。

![スクリーンショット 2021-01-04 9.39.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/1ff4ec88-9471-f735-aea8-6561aa970314.png)

#### ループ処理

ループ処理は、繰り返したいセレクタの中に記述します。
`@for $i(変数名) from(何番目から) *(数字) through(何番目まで繰り返す) *(数字)`のように定義します。
`$i`に2から5の数字をループさせて、処理を繰り返し行います。

```scss
.boxes {
  li {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: 1px solid #333;
    @for $i from 2 through 5 {
      &:nth-of-type(#{$i}) { // 2〜5番目まで選択したいので疑似クラス：nth-of-typeを使い、変数を(#{})で囲みます
        transform: translateX(($i - 1) * 20px);
      }
    }
  }
}
```
ループ処理を使って、2個目以降のボックスを右にずらすことができました。
<font color="white">~~顔を書いてオレンジっぽくして円形にしたらマリオに出てくる砂漠の敵のサンボみたいですね（笑）~~</font>

![スクリーンショット 2021-01-04 10.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/b7b77348-03c4-2ada-8270-2489d56c0de5.png)

CSSにコンパイルするとこうなります。

```css
.boxes li:nth-of-type(2) {
  transform: translateX(20px);
}

.boxes li:nth-of-type(3) {
  transform: translateX(40px);
}

.boxes li:nth-of-type(4) {
  transform: translateX(60px);
}

.boxes li:nth-of-type(5) {
  transform: translateX(80px);
}
```

## 例② 回転させつつ右にずらす

`transform`に`rotate`を加えると、回転させつつより変化を加えることができます。
勿論、`transform`以外にCSSで指定できるものであれば何を使ってもOKです。

```scss
transform: translateX(($i - 1) * 20px) rotate($i * 5deg);
```

![スクリーンショット 2021-01-04 10.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/210ed500-9608-7f2f-2565-4153e338338d.png)

## 例③ 色相を変える

ループ処理を使って色相を変化させてみようと思います。
Sassの組み込み関数で、色相を調整する`adjust-hue`を使います。

Sassの色に関する組み込み関数についての記事は[こちら](https://qiita.com/s79ns/items/ed8fc7fc4054d1e26994#adjust-hue)から御覧下さい。

```scss
    @for $i from 2 through 5 {
      &:nth-of-type(#{$i}) {
        transform: translateX(($i - 1) * 20px);
        background-color: adjust-hue(orange,($i - 1) * 45deg);
      }
    }
```

ループ処理と`adjust-hue`を使って色相を変えることができました。

![スクリーンショット 2021-01-04 10.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/5cdbf3b3-77ae-7411-c7dd-3f68cbee3302.png)

後に修正しやすくする為に、初期色を変数を定義しておくと便利になると思います。

```scss
.boxes {
  li {
    $adjustColor: orange;
    width: 100px;
    height: 100px;
    background-color: $adjustColor;
    border: 1px solid #333;
    @for $i from 2 through 5 {
      &:nth-of-type(#{$i}) {
        transform: translateX(($i - 1) * 20px);
        background-color: adjust-hue($adjustColor,($i - 1) * 45deg);
      }
    }
  }
}
```

## 例④ グラデーションをつける

10個ボックスがあり、ループ処理とSassの組み込み関数で順にグラデーションをさせます。

![スクリーンショット 2021-01-04 11.11.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/5890db68-361c-3cc5-65bf-caef2c554408.png)

勿論`lighten`でも可です。

```scss
    // 中略
    @for $i from 2 through 10 {
      &:nth-of-type(#{$i}) {
        background-color: darken(#eee, 5% * $i);
      }
    }
```

ループ処理を使ってグラデーションをさせることができました。
<font color="white">~~眼科医を連想させますね！~~</font>

![スクリーンショット 2021-01-04 11.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/e7c481bb-b323-cbd4-9a9b-de363a6280d3.png)

## 例⑤ if文を使って不規則な動きをつける

if文を使って、上の10個のボックスにそれぞれ不規則な動きをつけてみます。

```scss
    // 中略
    @for $i from 2 through 10 {
      &:nth-of-type(#{$i}) {
        background-color: darken(#eee, 5% * $i);
        @if $i % 2 == 0 {
          transform: translateY($i * 10px); // 偶数であれば上へ10px
        } @else {
          transform: translateY($i * -10px); // 奇数であれば下へ-10px
        }
      }
    }
```

![スクリーンショット 2021-01-04 11.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/3fbd7d19-aa76-9d18-76ef-272d23dede8d.png)

更に色や`translateY`の()内の数字も変数化すると、編集が一括化でき、コードも見やすくなります。

```scss
    // 中略
    @for $i from 2 through 10 {
      &:nth-of-type(#{$i}) {
        $bgc: #eee;
        background-color: darken($bgc, 5% * $i);
        $translateYpix: 10px;
        @if $i % 2 == 0 {
          transform: translateY($i * $translateYpix);
        } @else {
          transform: translateY($i * $translateYpix * -1);
        }
      }
```

## 例⑥ for文を使ってふわっとアニメーション

最後にfor文を使って下から順番にふわっとアニメーションをさせて表示させてみます。

```haml:index.haml
%ul.boxes
  %li
  %li
  %li
  %li
  %li
```

```scss:style.scss
@keyframes fadeIn {
  0% { // アニメーションの初期状態を設定します
    transform: translateY(30px); // 30px下に置いておきます
    opacity: 0; // 透明にしておきます
  }  
}

.boxes {
  display: flex;
  margin: 200px 0;
  li {
    height: 100px;
    width: 100px;
    background-color: #ccc;
    margin-left: 10px;
    animation: fadeIn 2s backwards; // 2秒かけて設定した状態からアニメーションさせます
    @for $i from 1 through 5 {
      &:nth-of-type(#{$i}) {
        animation-delay: .2s * $i; // アニメーションの再生時間を2秒遅らせる処理を繰り返します
        &::before {
          content: "#{$i}";
        }
      }
    }
  }
}
```

1~5までのブロックを、順番に下からふわっとアニメーションさせながら表示することができました。

![あにめーしょん.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/5e23e444-1ec0-a39f-8fd4-0af28c7ced96.gif)