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