SCSS (for... through/ to)

for ... through

• through 숫자까지 반복

@for $index from 1 through 3 {
  .through:nth-child(#{$index}){
    width: 20px * $index;
  }
}

CSS 변환결과

.through:nth-child(1) {
  width: 20px;
}

.through:nth-child(2) {
  width: 40px;
}

.through:nth-child(3) {
  width: 60px;
}

for ... to

• to 숫자 바로 앞의 숫자까지 반복

@for $index from 1 through 3 {
  .through:nth-child(#{$index}){
    width: 20px * $index;
  }
}

CSS 변환결과

.through:nth-child(1) {
  width: 20px;
}

.through:nth-child(2) {
  width: 40px;
}