SCSS & SASS - 반복문

01.SCSS 반복문

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

1.SCSS

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

// SCSS
@for $i from 1 through 10 {
    .box:nth-child(#{$i}) {
     width: 100px * $i; // 실제 값을 적는 부분이기 때문에 보관 기호 사용 x   
    }
}

• 보관 기호: JS => ${}, SCSS => #{}

2.CSS

.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;
}