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 li

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