与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; 
    } 
} 

上述代码应创建一个对两侧的两个100像素宽列与填充所述元件的宽度的其余部分在中央柱中的CSS网格。这部分工作正常。然后我尝试给网格线定制名称并将.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};