[SCSS] 반복문 @each / index() 함께 사용 / for in 문 유사

 

반복문 @each / index() 함께 사용 / for in 문 유사

 

안녕하세요~

@each 문은 js의 for in 문과 유사하게 사용할 수 있습니다.

 

 

 

 

 

---

 

 

@each 문

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


// scss 예)
// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}


// css 컴파일 예)
.fruits li.apple {
  background: url("/images/apple.png");
}
.fruits li.orange {
  background: url("/images/orange.png");
}
.fruits li.banana {
  background: url("/images/banana.png");
}
.fruits li.mango {
  background: url("/images/mango.png");
}

리스트에 있는 데이터가 순차적으로 $fruit 에 들어갑니다.

 

 

index값이 필요하면, 내장 함수 index() 사용하기

// scss 예)
// List Data */
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    $i: index($fruits, $fruit);
    li:nth-child(#{$i}) {
      left: 50px * $i;
    }
  }
}


// css 컴파일 예)
.fruits li:nth-child(1) {
  left: 50px;
}
.fruits li:nth-child(2) {
  left: 100px;
}
.fruits li:nth-child(3) {
  left: 150px;
}
.fruits li:nth-child(4) {
  left: 200px;
}

매번 index값이 필요한 순간 scss의 내장함수 index() 사용할 수 있습니다.

js의 배열처럼, $fruits 의 각각의 데이터를 왼쪽부터 순차적으로 1의 인덱스 값을 갖습는다.

 

 

 

 

 

 

여러개 list data 활용

// scss 예)
// List Data
$apple: (apple, korea);
$orange: (orange, china);
$banana: (banana, japan);

@each $fruit, $country in $apple, $orange, $banana {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}


// css 컴파일 예)
.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

동시에 여러개의 리스트 데이터도 반복해 처리할 수 있습니다.

자바스크립트의 구조분해와 유사하며, 각 리스트 데이터의 길이(length)는 동일해야 사용가능 합니다.

 

 

Map 데이터 함께 사용하기

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

// scss 예)
// List Data
$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan
);

@each $fruit, $country in $fruits-data {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}


// css 컴파일 예)
.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

Map 데이터는 자바스크립트의 객체처럼 key:value 로 값이 저장됩니다.

 

 

map과 index()를 함께 사용 못하는거 다들 알고 계신가요?

저만 몰랐나요?

map과 index()를 함께 사용하고 싶어서 폭풍 서칭한 결과 map-keys() 또는 map-values()를 쓸 수 있었습니다!! 👏👏👏

 

 

 

 

 

 

 

Map 데이터 + index() 조합해 사용할 때, map-keys() 또는 map-values()

// scss 예)
// List Data
$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan
);

@each $key, $value in $fruits-data {
  $fruits-data-key-list: map-keys($fruits-data);
  $index: index($fruits-data-key-list, $key);
  .box-#{$key} {
	width: 100px * $index;
    background: url("/images/#{$value}.png");
  }
}


// css 컴파일 예)
.box-apple {
  width: 100px;
  background: url("/images/korea.png");
}
.box-orange {
  width: 200px;
  background: url("/images/china.png");
}
.box-banana {
  width: 300px;
  background: url("/images/japan.png");
}

map 데이터에서는 내장함수 index() 를 사용할 수 없습니다.

map의 key값과 value값을 따로 리스트에 저장한 후 사용할 수 있습니다.

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

value를 리스트로 저장하는 함수는 map-values() 를 사용할 수 있습니다.

 

 

 

 

 

이 포스팅을 보신 분들도 많은 도움이 되었으면 합니다 🙂

 

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏