CSS 网格和 Sass

Question

CSS 工作组成员 Rachel Andrews 在 session 视频中提到 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"

已满 working demo here

---

编辑 上面的例子不再有效，我认为是由于新版本的 Sass 的变化。它无法处理多行表达式 ( issue here )。每个网格行都必须在同一行中定义:

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

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