Question

如果你听说过css网格，也许你偶然发现了同样的问题：

我正在尝试使用postcss构建一个for循环来构建类似这样的东西，以便在我的页面中轻松使用类（为了保持简单，我在这里留下了-ms-支持，我必须构建类似的东西，但是计算）

.ac-grid--even-1 {

        grid-template-columns: 1fr;
    }


.ac-grid--even-2 {

        grid-template-columns: 1fr 1fr;
    }


.ac-grid--even-3 {

        grid-template-columns: 1fr 1fr 1fr;
    }

我唯一的问题是......我怎么能重复像我这样的水平的东西 1fr 1fr 1fr？正在寻找包装和东西，但却找不到有用的东西：＆lt;我正在寻找类似的东西：

  .ac-grid--even {

    @for $grid_number from 1 to 12 {
   &-$grid_number {

        grid-template-columns: $grid_number * '1fr ';
   }
    }
   }

谢谢

编辑：

感谢Terry

对于postcss来说，如果有人需要它，它会有点不同：

    $incrementalFr: 1fr;
    @for $grid_number from 1 to 12 {
        .ac-grid--even-$grid_number {

            grid-template-columns: $incrementalFr;
        }
        $incrementalFr: $incrementalFr 1fr;
    }

edit2：这种方式不适用于计算：/

示例：

    $incrementalFr: 1fr;
    $test: ;
    @for $grid_number from 1 to 12 {
        $col: $grid_number;
        $spacer: ($col - 1);
        $test: $test calc((100% / $col) - (($grid-gap * $spacer) / $col)) $grid-gap;

        &-$grid_number {
            -ms-grid-columns: $test;
            grid-template-columns: $incrementalFr;
        }
        $incrementalFr: $incrementalFr 1fr;
    }

这是有意义的，因为它一次只添加一个部分，这导致字符串的“正确”长度但是数字增加而不是重复的块^^

该死的你啊！

还有其他建议吗？解决方法？包？

Answer 1

您可以在SASS中使用以下逻辑：

声明以1fr开头的变量，例如$incrementalFr: #{"1fr"};
使用@for循环并循环显示1到13（不包括13个，因此您将共有12个类。）
在每个循环中，声明该类并为其分配变量：grid-template-columns: $incrementalFr;
在每次迭代结束时，您将1fr附加到变量（以便在下一次迭代中再次重复1fr），使用append($incrementalFr, #{"1fr"})

这是SASS代码（check out the compiled CSS）：

$incrementalFr: #{"1fr"};

@for $grid_number from 1 to 13 {
  .ac-grid--even-#{$grid_number} {
      grid-template-columns: $incrementalFr;
  }
  $incrementalFr: append($incrementalFr, #{"1fr"});
}

编译后的CSS（为简洁而截断）如下所示：

.ac-grid--even-1 {
  grid-template-columns: 1fr;
}

.ac-grid--even-2 {
  grid-template-columns: 1fr 1fr;
}

.ac-grid--even-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

// ...
// Lines are truncated for brevity
// ...

.ac-grid--even-12 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

css“vertical for-loop” - css网格的助手 - 字符串重复/构建

1 个答案: