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

上記のコードは、中央の要素の幅の残りの部分を充填カラムで両側にある2つの100pxに広い列を有するCSSグリッドを作成する必要があります。この部分はうまく動作します。私はその後、Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

があると言って、グリッド線のカスタム名を付け、.one真ん中の列の要素が、CodepenのSCSSプリプロセッサ（だけでなく、私が試した他のすべてのコンパイラ）全体をコンパイルすることを拒否を配置してみてくださいそれを解析せずにそのまま（あるいは別の方法でこれをコンパイルして表現する）SCSSにこのスタイルを強制的にコンパイルさせる何らかの方法や、通常のCSSで実験を書き直す必要がありますか？

Answer 1

は、文字列にあなたのCSSラインを全部入れてみてください：

$gridTplCols: "[main-start] 100px [content-start] 1fr [content-end] 100px [main-end]"; 

grid-template-columns: #{$gridTplCols};