如果您听说过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？在寻找包裹和东西，但无法找到有用的东西：
.ac-grid--even {
@for $grid_number from 1 to 12 {
&-$grid_number {
grid-template-columns: $grid_number * '1fr ';
}
}
}
谢谢
编辑：
多亏特里
对于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;
}
这是有道理的，因为它一次只添加了一部分，这导致了字符串的“正确”长度，但是数字增加了，而不是重复的块^^
该死的你，IE浏览器！
还有其他建议吗？解决方法？包？
最佳答案
您可以在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 - CSS“垂直循环”-CSS网格的助手-字符串重复/构建，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45694490/