Css 跨越列名称的网格模板区域

所以你我想要这样的网格：

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

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

所以问题是：我怎么能不重复“a-block”三次呢？我能做一些类似于

重复（“a-block”，3）

或其他什么的事情吗？

---

是否有一种更紧凑的方式跨越网格区域柱（在sass中）

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

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

详情如下：

---

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

---

天哪，有时无礼真的很难看；）嗯，这可能很难看，但很管用。我同意，哈哈。我甚至可以选择自己写下重复的名字，但也许这个函数可以在某个地方重用。谁知道呢\_(ツ)_/''对于简单的网格来说，重复名称是一种方法。但在真实的应用程序中，给网格区域指定和放置在其中的元素类相同的名称真的很好。若你们使用BEM，名称可能会很长。若你们需要跨越其中的20个…你们可以想象不，我想你们不能用普通的CSS来完成。这太糟糕了。这种力量让您保持名称简短，但我希望保持名称更长—以匹配这些区域中的元素类。

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