TIL | SCSS @for

cos·2022년 1월 14일
0
post-thumbnail

@for는 스타일을 반복적으로 출력한다. for문과 유사하다.

@forthrough를 사용하는 형식과, to를 사용하는 형식으로 나뉜다.
두 형식은 종료 조건이 해석되는 방식이 다르다.

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

차이점을 이해하기 위해 다른 예제를 살펴보자.
변수는 관례상 $i를 사용한다.

SCSS

// 1부터 3까지 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width: 20px * $i
  }
}

@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width: 20px * $i
  }
}

⬇️
CSS

.through:nth-child(1) {
  width: 20px;
}

.through:nth-child(2) {
  width: 40px;
}

.through:nth-child(3) {
  width: 60px;
}

.to:nth-child(1) {
  width: 20px;
}

.to:nth-child(2) {
  width: 40px;
}

.to:nth-child(3) {
  width: 60px;
}

to는 주어진 값 직전까지만 반복해야할 경우 유용할 수 있다.
그러나 :nth-child()에서 특히 유용하게 사용되는 @for는 일반적으로 through를 권장한다.

profile
The journey is the reward

0개의 댓글