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