使用 SCSS 命名的 CSS 网格线

Question

我正在尝试codepen.io 中的新CSS Grid Layout system。它有一个名为named grid lines 的有趣功能，允许为列和行之间的网格线定义自定义名称。不幸的是，我似乎无法使该功能正常工作，因为 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 网格，它的侧面有两个 100 像素宽的列，其中一个列在中心填充元素的其余宽度。这部分工作正常。然后我尝试给网格线自定义名称并将 .one 元素放在中间列，但 Codepen 的 SCSS 预处理器（以及我尝试过的所有其他编译器）拒绝编译整个东西，说 Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

有什么方法可以强制 SCSS 在不解析的情况下按原样编译该样式（或以另一种编译方式表达），还是我必须用常规 CSS 重写我的实验？

Answer 1

尝试将整个 CSS 行转换为字符串：

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

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