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＆＃39;等

$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

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

Sass列大小mixin

1 个答案: