css - 使用 SCSS 命名 CSS 网格线

Question

我正在试验新的 CSS Grid Layout system在 codepen.io .它有一个有趣的功能，称为 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};