each 반복문은 list와 map의 데이터를 반복할 때 사용된다.
이전에 공부한 for문은 규칙적으로 값이 변해야 한다는 한계가 있지만, each문은 list와 map에 대한 이해가 있다면 어떤 상황에서도 코드를 반복적으로 적지 않아도 될 만큼 유용하다.



/* 
@each $변수 in 데이터 {
  실행문
}
*/



list 데이터 반복하기


list는 배열(array)와 유사하다. 일반적으로 하나의 데이터를 저장하기 위해서 변수를 사용하는데, 여러개의 데이터를 저장할 때는 보통 list나 map을 사용한다.



$colors: (red, orange, yellow ,green);

.colors {
    @each $color in $colors {
        li.#{$color} {
            background: url(img/#{$color}.svg);
        }    
    }
}


css에서는 아래처럼 나타난다.


.colors li.red {
  background: url(img/red.svg);
}

.colors li.orange {
  background: url(img/orange.svg);
}

.colors li.yellow {
  background: url(img/yellow.svg);
}

.colors li.green {
  background: url(img/green.svg);
}



map 데이터 반복하기


map의 사용목적과 사용방법은 list와 유사하다. 차이점은 각 값마다 매칭되는 키 값이 있기 때문에 동적으로 접근할 수 있다.


/* 
@each $key변수, $value변수 in 데이터 {
  실행문
}
*/

map 데이터를 반복 할 때는 하나의 데이터에 두개의 변수가 필요하다. 


$colors-data: (
    red: first,
    orange: second,
    yellow: third,
    green: fourth
);

@each $color, $order in $colors-data {
    .colors {
        li.color-#{$color} {
            background: url(img/#{$order}.svg);
        }
    }
}


css에서는 아래처럼 나타난다.


.colors li.color-red {
  background: url(img/first.svg);
}

.colors li.color-orange {
  background: url(img/second.svg);
}

.colors li.color-yellow {
  background: url(img/third.svg);
}

.colors li.color-green {
  background: url(img/fourth.svg);
}