SCSS (for... through/ to)

goodlana·2020년 9월 5일
0

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;
}
profile
Let's code like chord !

0개의 댓글