[SCSS] @each 반복문 / List, Map 데이터를 반복할 때 사용/ index()

@each 는 List , Map 데이터를 반복할 때 사용한다.

for in 문과 비슷하다.

@each $변수 in 데이터 {
  // 반복 내용
}

리스트에 있는 것들이 순서대로 $fruit에 들어간다.

 

---

혹시 매번 반복마다 Index 값이 필요하다면  index() 내장 함수를 사용할 수 있다.

---

Map 데이터 사용

map데이터는 key: value로 값이 저장된다.

위의 코드의 뜻은 

.box- 뒤에 key (apple, orange, banana) 가 순서대로 오는 이름을 가진 클래스에

background 이미지명이 value( korea, china, japan) 순서대로 온다는 뜻이다.

 

map에서는 위에 사용한 것 처럼 index()를 사용할 수 없다.

따라서 map을 key와 value따로 따로 리스트에 저장한 후 사용해야한다.

key를 리스트로 저장하는 함수는 map-keys()

value를 리스트로 저장하는 함수는 map-values()이다.