css - SCSS を使用した名前付き CSS グリッド線

Question

codepen.ioの新しいCSS Grid Layout システムを試しています。列と行の間のグリッド線にカスタム名を定義できる、名前付きグリッド線と呼ばれる興味深い機能があります。残念ながら、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 ピクセルの列が 2 つあり、中央に要素の幅の残りを埋める列がある CSS グリッドを作成する必要があります。この部分は正常に動作します。次に、グリッド線にカスタム名を付けて.one要素を中央の列に配置しようとしましたが、Codepen の SCSS プリプロセッサ (および私が試した他のすべてのコンパイラ) は、すべてをコンパイルすることを拒否し、次のように述べています。Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

SCSS がこのスタイルを解析せずにそのままコンパイルする (またはコンパイルする別の方法で表現する) ようにする方法はありますか? それとも、通常の CSS で実験を書き直す必要がありますか?