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를 붙이고 싶을 때 이런 클래스를 사용하여 마진을 비우는 패턴을 자주 볼 수 있습니다. 이 때 For문을 사용합니다.

app.scss

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

참고

Sass : each와 for를 사용하여 반복적으로 작성하는 번거로움