薩斯列大小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

請注意，您可能希望引入一些舍入邏輯的百分比，但這是另外一個問題。