SASS compiler can't compile CSS grid template names

1

I’m trying to use SASS to build a CSS Grid builder.

The SASS compiler doesn’t seem to like compiling CSS gridline template names like:

grid-template-rows:    [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-3-start] 1fr [row-3-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-4-start] 1fr [col-5-start] 1fr [col-end];

These are just examples from http://learncssgrid.com/

Any thoughts?

2

The addition of square brackets with named grid lines seems to be breaking a lot of CSS/SCSS parsers. I was able to work around this in Jekyll using the unquote() function. Something like this should work:

grid-template-rows: unquote("[row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-3-start] 1fr [row-3-end row-end]");
grid-template-columns: unquote("[col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-4-start] 1fr [col-5-start] 1fr [col-end]");
1 Like