CSS grid & Sass

Question

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

Answer 1

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.