반복문

블럭형태의 이미지등을 배열할때 유용할 수 있다.

// scss
// JS의 반복문과 유사한 기능
@for $i from 1 through 3 {
    .box:nth-child(#{$i}) {
        width: 100px * $i;
    }
}

// css compile
.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

.box:nth-child(3) {
  width: 300px;
}