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

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

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

　①　

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

　②　

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

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を使って繰り返し記述する手間を省く