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?
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