CSS grid & Sass
Grid template areas must be quoted. Each row is a single string:
grid-template-areas: "header header"
"main sidebar"
"footer footer"
full working demo here
edit The above example no longer works, I think due to changes in newer versions of Sass. It cannot handle the multi-line expression (issue here). Each grid row must be defined all in the same line:
.grid
display: grid
grid-template-areas: "header header" "main sidebar" "footer footer"
grid-gap: 1em
The linked demo on codepen has been updated to match. If you use the SCSS syntax (with braces & semi-colons), there isn’t this limitation.
Admin
Updated on August 07, 2022Comments
-
Admin almost 2 years
The CSS working group member Rachel Andrews mentioned in a conference video that Sass is compatible with the new CSS grid spec. With that, does anyone know the syntax for spacing the "ASCII art" on grid-template-areas for Sass? I've since checked the Sass documentation and couldn't find anything (yet). The errors I get involve spacing. Appreciate any pointers in the community. If not, back to .css until then (: Thanks...
.wrapper grid-template-areas: header nav image lead cta //errors occur here with ASCII art grid areas for CSS grid .header-area grid-area: header .nav-area grid-area: nav .image grid-area: image .lead grid-area: lead .cta grid-area: cta