Named CSS grid lines with SCSS

Question

I'm experimenting with the new CSS Grid Layout system in codepen.io. It has an interesting feature called named grid lines that allows defining custom names for the grid lines between the columns and rows. Unfortunately I can't seem to get the feature to work because SCSS doesn't approve of the [line-name] syntax.

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

The code above should create a CSS grid that has two 100px wide columns on the sides with a column that fills the rest of the element's width in the center. This part works fine. I then try to give the grid lines custom names and place the .one element in the middle column but Codepen's SCSS preprocessor (as well as all the other compilers I've tried) refuses to compile the whole thing, saying Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

Is there some way to force SCSS to compile this style as-is without parsing it (or express this in another way that compiles) or will I have to rewrite my experiment with regular CSS?

Answer 1

Try putting whole your CSS line to string:

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

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