반복문 - for

@for

@for는 스타일을 반복적으로 출력한다.
Javascript for 문과 유사하다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다.
두 형식은 종료 조건이 해석되는 방식이 다르다.

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

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

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

 

 

* through와 to의 차이점

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

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

.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()에서 특히 유용하게 사용되는 @for는 일반적으로 through를 사용하길 권장한다.

.through:nth-child($i)라고 넣으면 안된다. 문자 보간"#{ }" 을 통해서 무엇이 들어가는지 표시해줘야한다.