萨斯列大小MIXIN

Question

我正在写一个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} {} 
} 

谢谢！

Answer 1

如果我理解正确，您只需要在需要时包含类，而不是打印每个排列。这是什么意思？

@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%; 
} 

SASSMEISTER

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