Sass列大小混合

我正在编写一个mixin来创建一组列大小的类，这是到目前为止我得到的代码：

.col {
    @for $span from 1 through 12 {
        @for $total from 1 through 12 {
            @if $total > $span {
                &--#{$span}of#{$total} {
                    width: percentage($span/$total);
                }
            }
        }
    }
}

这将输出

.col--XofX

的类，其中x是介于1和12之间的每个数字。 这意味着我的课程会像下面这些例子一样出现：

.col--1of1
.col--1of2
.col--1of3

等等，一直到

1of12

我还参加了以下课程：

.col--5of8
.col--7of10
.col--10of12

等等，只要

$span

是一个小于

$total

的数字，则最多为12

我想知道的是，是否有更好的方法来编写这个mixin，比如为每个属性传递1到12，类似于下面的想法。另外，我不希望类的跨度大于总跨度，所以我不希望使用“.col--8of1”等

$span: 1 through 12
$total: 1 through 12
@mixin create-cols($span, $total) {
    .col--#{$span}of#{$total} {}
}

---

谢谢

如果我理解正确，您只希望在需要时包含类，而不是打印每个排列。你的意思是这样吗

@mixin create-cols($span, $total) {
  .col--#{$span}-of-#{$total} {
    width: (($span/$total)*100%);
  }
}

.col {
  @include create-cols(2, 12);  
  @include create-cols(3, 12);
  @include create-cols(6, 12);  
}

汇编至：

.col .col--2-of-12 {
  width: 16.66667%;
}
.col .col--3-of-12 {
  width: 25%;
}
.col .col--6-of-12 {
  width: 50%;
}

---

请注意，您可能希望为百分比引入一些舍入逻辑，但这是一个单独的问题。

@对于第二个循环中从$span+1到12的$total{

，可以保存if语句。