Sass 列大小混合

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);
                }
            }
        }
    }
}

这会输出类 of .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

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

Sass 列大小混合

Sass column sizes mixin

sass

mixins