css - 用于生成动态比率语义类的 Sass 循环

Question

我正在尝试编写一个 Sass 循环，它将创建具有比率语义的网格设置。

我开始了：

$columns:       12 !default;  

@mixin widths-setup($namespace: "") {
    @for $i from 1 through $columns { 
        .width-#{$i} { 
            width: percentage($i/$columns); 
        } 
    }
}

产生：

.width-1 {  width: 8.33333%; }

.width-2 {  width: 16.66667%; }

...

.width-12 {  width: 100%; }

我想生产的，大概是使用@if 条件是

.width-1-1 {  width: 100%; }

.width-1-2 {  width: 50%; }

.width-2-2 {  width: 100%; }

.width-1-3 {  width: 33.3333%; }

.width-2-3 {  width: 66.66667%; }

.width-3-3 {  width: 100%; }

...

.width-1-12 {  width: 8.3333%; }

.width-2-12 {  width: 16.6666%; }

.width-3-12 {  width: 25%; }

...

.width-12-12 {  width: 100%; }

每个类都以宽度开始，第二个数字在循环的每一步中增加一，直到等于 {$i}，第三个数字是 {$i} 的增加，它将在分配给 $columns 变量的数字处停止。

虽然会有不必要的类（width-1-1、width-2-2、width-3-3 等）都等于相同的宽度，但此时我并不关心这种膨胀。

Answer 1

$columns: 12 !default;  

@mixin widths-setup($namespace: "") {
    @for $i from 1 through $columns { 
        $cols: $i;
        @for $k from 1 through $cols { 
            .width-#{$k}-#{$i} {
                width: percentage($k/$cols); 
            }
        }
    }
}

这应该输出您预期的（但仍然臃肿）的结果。