CSS网格和Sass

Question

CSS工作组成员Rachel Andrews在会议视频中提到Sass与新的CSS网格规范兼容。这样，是否有人知道在Sass的网格模板区域上分隔“ ASCII艺术”的语法？从那以后，我检查了Sass文档，但找不到任何东西。我得到的错误涉及间距。赞赏社区中的任何指针。如果没有，请返回.css直到（（：谢谢...

.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: "header header"
                       "main   sidebar"
                       "footer footer"

完整的工作演示在这里

编辑上面的示例不再起作用，我认为是由于新版本的Sass中的更改。它无法处理多行表达式（在此处发出）。必须在同一行中全部定义每个网格行：

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

Codepen上的链接演示已更新为匹配。如果您使用SCSS语法（带有大括号和分号），则没有此限制。