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

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

虽然会有不必要的类（宽度-1-1，宽度-2-2，宽度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); 
            }
        }
    }
}

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

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

1 个答案: