scss 반복문(for $i from 1 from n){}

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

@for $i from 1 through 10{
    /*자바스크립트 보간법`{$A}`과 유사*/
    /*차이점은 $1이 제로베이스가 아님*/
    .box:nth-child(#{$i}){
        width:100px*$i;
    }
}


//css
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(1) {
  width: 100px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(2) {
  width: 200px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(3) {
  width: 300px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(4) {
  width: 400px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(5) {
  width: 500px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(6) {
  width: 600px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(7) {
  width: 700px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(8) {
  width: 800px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(9) {
  width: 900px;
}

/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(10) {
  width: 1000px;
}