scss 使用@for创建Sass循环

Posted 2021-05-17

// start through end example
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}


// when the above is converted to css, the below is the result
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}