Question

所以你想要这样的网格：

+-----------------------+
|          A            |
-------|--------|-------+
|  B   |  C     |   D   |
|      |        |       |
+------+--------+-------+

我可以做这样的事情（scss语法）：

grid-template-areas: "a-block a-block a-block" "b-block c-block d-block";

所以问题：我怎么能不重复，＆＃34; a-block＆＃34;三次？我能做repeat("a_block", 3)之类的事吗？是否有更紧凑的方法来跨越网格区域列（在sass中）？

Answer 1

不，没有其他方法可以声明这些字符串值（在纯CSS级别）。

每个字符串必须具有相同的列数，如网格规范中所定义。

此处有更多详情：

Answer 2

这个sass函数应该可以解决问题。不确定这是否是编写它的最佳方式，但似乎有效。

@function repeat-str($str, $times) {
  @if $times > 0 {
    @return $str + repeat-str($str, $times - 1);
  }
  @return "";
}

.grid {
  grid-template-areas: repeat-str("a-block ", 3) "b-block c-block d-block";
  // output: grid-template-areas: "a-block a-block a-block " "b-block c-block d-block";
}

网格模板区域跨越col-names

2 个答案: