SASS - @each

@for문 보다 좀 더 다양하고 기능 범용성이 있는 @each에 대해 알아보겠습니다

@for문은 반복문이 간결하고 쉽지만 숫자만 반복됩니다

&:nth-of-type(1) {
      a {
        @include button($bg: pink);
      }
    }
    &:nth-of-type(2) {
      a {
        @include button($bg: aqua);
      }
    }
    &:nth-of-type(3) {
      a {
        @include button($bg: orange);
      }
    }
    &:nth-of-type(4) {
      a {
        @include button($bg: lightgreen);
      }
    }

여기 값을 보면 각각 컬러값이 다르고 순서값으로 활용하기 애매합니다

하지만 @each로 처리가 가능합니다

먼저 서로 리스트가 다른걸 그룹화 시킬 수 있습니다

style.scss에 작성합니다

$bgs: (pink, aqua, orange, lightgreen);

하나씩 뽑아서 사용할 변수명을 생성합니다

    @each $el in $bgs {
        
    }

$bgs에 들어간 값만큼 반복을 주면서 각각의 값들을 $el에 넘겨주겠다, 넘겨서 중괄호 안에 넣어주겠다 라는 의미를 가집니다

nth-of-type을 모두 주석처리합니다

@each $el in $bgs {
        &:nth-of-type() {
             
        }
    }

여기서 순번이 반복이 되어야합니다 순번도 자동으로 받을 수 있습니다

$num

$num 변수를 미리 생성하고 index() 함수를 호출합니다 그리고 그룹명을 넣어줍니다

@each $el in $bgs {
        $num: index($bgs, $el);
        &:nth-of-type() {
             
        }
    }

전체 $bgs에서 돌고있는 $el의 순서값을 알아서 결정해서 $num 변수값에 저장하게됩니다

@each $el in $bgs {
      $num: index($bgs, $el);
      &:nth-of-type(#{$num}) {
      }
    }

이제 a 태그 내용을 집어넣습니다 생성된 $bg 변수에 $el 값을 넣었습니다 여기서 $bg는 mixin.scss에서 확인할 수 있습니다

@each $el in $bgs {
      $num: index($bgs, $el);
      &:nth-of-type(#{$num}) {
        a {
          @include button($bg: $el);
        }
      }
    }

css에서 보면 각각 값에 컬러값이 잘 들어간걸 확인할 수 있습니다

이미 @each에서 숫자값까지 치환이 되어있으니 @for문도 필요없어지게 되었습니다

@for문에서 처리한 transition-delay 값을 @each에서 해보겠습니다

@each $el in $bgs {
      $num: index($bgs, $el);
      &:nth-of-type(#{$num}) {
        transition-delay: $interval * $num;
        a {
          @include button($bg: $el);
        }
      }
    }