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

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

我唯一的问题是......我怎么能重复水平的东西，比如 1 法 1 法 1 法 ?正在寻找包裹和东西，但找不到有用的东西：

  .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！！！

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

Answer 1

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

1. 声明一个以1fr开头的变量，例如$incrementalFr: #{"1fr"};
2. 使用 @for 循环并循环 1 到 13（不包括 13，因此您总共将有 12 个类）。
3. 在每个循环中，声明类并为其分配变量：grid-template-columns: $incrementalFr;
4. 在每次迭代结束时，使用append($incrementalFr, #{"1fr"}) 将1fr 附加到变量（以便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;
}