使用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};