CSS Mesh & Sass

Question

CSS team member Rachel Andrews mentioned in a video conference that Sass is compatible with the new CSS grid specification. Does anyone know the syntax for dividing "ASCII-art" into template-template areas for Sass? Since then, I checked the Sass documentation and have not found anything (yet). The errors that I get are related. Rate any pointers in the community. If not, go back to .css until then (: Thank you ...

.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

Run codeHide result

Answer 1

You must provide quotes for grid templates. Each line represents one line:

  grid-template-areas: "header header"
                       "main   sidebar"
                       "footer footer"

full working demo here

---

edit , , - Sass. (). :

.grid
  display: grid
  grid-template-areas: "header header" "main sidebar" "footer footer"
  grid-gap: 1em

- ​​ . SCSS ( ), .

Answer 2

sass css, . , . , ( sass) / "grid-template-area". . , diff , sass . "grid-template-areas" .