问题 使用SCSS命名CSS网格线

我正在尝试新的 CSS网格布局系统在 codepen.io。它有一个有趣的功能叫做命名网格线允许为列和行之间的网格线定义自定义名称。不幸的是，我似乎无法使该功能正常工作，因为SCSS不赞成 [line-name] 句法。

#container.named {
  grid-template-columns: [main-start] 100px [content-start] 1fr [content-end] 100px [main-end]; // Will not pass SCSS validation :(

  .one {
    grid-column: content-start / content-end;
  }
}

上面的代码应该创建一个CSS网格，其两侧有两个100px宽的列，其中一列填充了中心元素宽度的其余部分。这部分工作正常。然后我尝试给网格线自定义名称并放置 .one 在中间列中的元素，但Codepen的SCSS预处理器（以及我尝试过的所有其他编译器）拒绝编译整个事情，说 Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

有没有办法迫使SCSS按原样编译这个样式而不解析它（或用另一种编译方式表达）或者我是否必须用常规CSS重写我的实验？

尝试将整个CSS行放到字符串中：

$gridTplCols: "[main-start] 100px [content-start] 1fr [content-end] 100px [main-end]";

grid-template-columns: #{$gridTplCols};

问题使用SCSS命名CSS网格线

答案:

热门问题

问题 使用SCSS命名CSS网格线

答案:

热门问题

问题使用SCSS命名CSS网格线