CSS 网格 & Sass

Question

CSS 工作组成员 Rachel Andrews 在会议视频中提到 Sass 与新的 CSS 网格规范兼容。有了这个，有谁知道在 grid-template-areas 上为 Sass 间隔 "ASCII art" 的语法？我已经检查了 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 语法（带大括号和分号），则没有此限制。

Answer 2

我使用 sass 作为 pre-processor 用于 css 并入网格。一开始我遇到了几个问题，结果是没有呈现网格。我首先想到 "grid-template-area" 中 content/lines 的数量有一些限制（在 sass 中）。我缩小了同样问题的线路。最后，在文件比较程序中运行差异之后，我意识到 sass 对空格敏感。当清除 "grid-template-areas" 块之间的空白时，它开始工作。

CSS 网格 & Sass

CSS grid & Sass

css

sass

css-grid