Sass Eachで同じスタイルの繰り返し記述を省略する

### 同じスタイルで色を使い分けたい場合

![スクリーンショット 2019-11-20 11.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/aec21e30-8ee2-c59f-a9c6-02a34986a175.png)

### each文の基本

```
@each $var[, $var...] in list or map { ... }
```

```app.scss

$配列A: 値, 値, 値;
$配列B: 値, 値, 値; // ※必ずしも配列が2つ以上ないとダメというわけではない

ul {
  & > li {
    @each $変数A in $配列A {
      $index_key: index($配列A, $変数A); // indexの取得

      &.is-#{$変数A} {
        a {
          color: nth($配列B, $index_key);
        }
      }
    }
  }
}
```

### 今回の実装

```index.html

<footer class="footer">
    <div class="inner">
      <ul class="footer__sns__list">
        <li>
          <a class="footer__sns__btn is-facebook">Facebook</a>
        </li>
        <li>
          <a class="footer__sns__btn is-google">Google+</a>
        </li>
        <li>
          <a class="footer__sns__btn is-twitter">Twitter</a>
        </li>
        <li>
          <a class="footer__sns__btn is-pinterest">Pinterest</a>
        </li>
        <li>
          <a class="footer__sns__btn is-behance">Behance</a>
        </li>
        <li>
          <a class="footer__sns__btn is-dribbble">Dribbble</a>
        </li>
      </ul>
    </div>
  </footer>

```


```app.scss

.footer {
  padding: 70px 0;

  $snsName: facebook, google, twitter, pinterest, behance, dribbble;
  $snsColor: #4668b3, #de5745, #2fbbed, #d94348, #3079ff, #eb6397;

  @mixin btn($color) {
    display: block;
    padding: 20px 30px;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    background-color: $color;
    text: {
      decoration: none;
      align: center;
    }
  }

  &__sns {
    &__list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      & > li {
        width: 32%;
        &:nth-child(n+4){
          margin-top: 20px;
        }
      }
    }
    &__btn {
      @each $color in $snsName {
        // @debug $color; でここで$colorにどの値が入っているのか確認 ① 
        $index_key: index($snsName, $color);
        // @debug $index_key でここで$index_keyにどの値が入っているのか確認 ②
        &.is-#{$color}{
          // @include btn(引数: カラーコード)
          // nth(配列, インデックス) => カラーコードの取得
          @include btn(nth($snsColor, $index_key));
        }
      }
    }
  }
}


```

　①　![スクリーンショット 2019-11-20 13.04.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/ea04beb0-59dd-3fe3-3715-914a4044a203.png)

　$snsName の配列が変数に代入されていることが確認できる。

　②　![スクリーンショット 2019-11-20 13.08.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/dbe8c504-537a-83b6-b4b3-148ccd4ec91a.png)

　インデックスメソッドで各配列のインデックス番号を取得。


Each以外にもFor文での繰り返し処理もある。


## For文

```app.scss
/* 指定した終了の数値を含んで繰り返し処理 */
@for $変数名 from 開始の数値 through 終了の数値 {
  処理を記述
}

/* 指定した終了の数値を含まず繰り返し処理 */
@for $変数名 from 開始の数値 to 終了の数値 {
  処理を記述
}
```

```app.css
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
```
ある箇所にだけマージン10pxを付けたいという時に、こういうclassを使ってマージンを空けるというパターンをよく見かけます。 こういう時にFor文を使用します。

```app.scss

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



##参考

[Sass：eachやforを使って繰り返し記述する手間を省く](https://www.nxworld.net/tips/sass-each-and-for-snippets.html)