css - 网格模板区域跨越列名

Question

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

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

我可以这样做(scss 语法):

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

那么问题来了:我怎么能不重复“a-block”三次？我可以做类似repeat("a_block", 3) 之类的事情吗？ 是否有更紧凑的方式来跨越网格区域列(在 sass 中)？

Answer 1

这个 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";
}