SCSS (each)

list 반복

$fruits: apple, orange, banana, mango; 
// list 소괄호 넣어도 안넣어도 상관 없음

.fruits {
  @each $fruit in $fruits {
    $index: index($fruits, $fruit); //index는 내장함수
    li:nth-child(#{$index}) {
      left: 50px * $index;
      background: url("/image/#{$fruit}.png");
    }
  }
}

CSS 변환결과

.fruits li:nth-child(1) {
  left: 50px;
  background: url("/image/apple.png");
}
.fruits li:nth-child(2) {
  left: 100px;
  background: url("/image/orange.png");
}
.fruits li:nth-child(3) {
  left: 150px;
  background: url("/image/banana.png");
}
.fruits li:nth-child(4) {
  left: 200px;
  background: url("/image/mango.png");
}

Map 데이터 반복

$fruits-data: (//괄호 무조건 넣어주기
  apple: korea,
  orange: china,
  banana: japan
);

//첫번째 인자는 키, 두번째 인자는 값.
@each $fruit, $country in $fruits-data {
  //index()는 맵데이터를 처리할 수 없다.
  //map-keys($fruits-data) // (apple, orange, banana)
  //map-values($fruits-data) // (korea, china, japan)
  $fruits-data--key-list: map-keys($fruits-data);
  $index: index($fruits-data--key-list, $fruit);
  .box-#{$fruit} {
    width: 100px * $index;
    background: url("/image/#{$country}");
  }
}

CSS 변환결과

.box-apple {
  width: 100px;
  background: url("/image/korea");
}

.box-orange {
  width: 200px;
  background: url("/image/china");
}

.box-banana {
  width: 300px;
  background: url("/image/japan");
}