SCSS 반복문

SCSS 반복문

JavaScript에서 for, while을 이용하여 반복문을 이용하는 것처럼 SCSS에서도 반복문을 출력할 수 있습니다. 특히, nth-child(1)와 같이 가상 클래스 선택자를 활용함에 있어 유용하게 사용할 수 있습니다. 아래의 예시를 봅시다.

1. SCSS

// for (let i = 0; i < 10; i++) {
//     console.log(`loop-${i}`)
// }

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

2. CSS(Compiled)

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

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

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

.box:nth-child(4) {
  width: 400px;
}

.box:nth-child(5) {
  width: 500px;
}

.box:nth-child(6) {
  width: 600px;
}

.box:nth-child(7) {
  width: 700px;
}

.box:nth-child(8) {
  width: 800px;
}

.box:nth-child(9) {
  width: 900px;
}

.box:nth-child(10) {
  width: 1000px;
}