SCSS에는 반복문도 있다…!

@for 라는 키워드를 이용한다.

@for $i from 1 through 10 {
	.box {
		width : 100px;
		}
}

💡 SCSS에서는 반복문을 1부터 시작한다.

심지어 for문 내에서 인덱스를 #{ } 를 이용해 저번시간에 배운 인수로 전달할 수도 있다.

💡 #{ } 를 이용하는걸 ‘보간’한다고 프론트 엔드에선 표현한다. 영어로는 Interplation이다.

렌더링을 위해 동적 데이터를 HTML Template등에 끼워넣는 행위를 보간한다고 표현한다.

@for $i from 1 through 10 {
	.box:nth-child(#{$i}) {
		width: 100px;
		}
}

연산자와 함께 사용해 다음처럼도 작성할 수 있다.

@for $1 from 1 through 10 {
	.box:nth-child(#{$i}) {
		width: 100px * $i;
		}
}