6

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

4

2 回答 2

15

必须引用网格模板区域。每行都是一个字符串：

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

完整的工作演示在这里

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

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

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

于 2017-03-31T15:13:13.523 回答
0

我使用 sass 作为 CSS 合并网格的预处理器。一开始我遇到了几个问题，结果是没有显示网格。我首先认为“网格模板区域”中的内容/行数量存在一些限制（在 sass 中）。我缩小了同样问题的线路。最后，在文件比较程序中运行 diff 后，我意识到 sass 对空格很敏感。当清除“网格模板区域”块之间的空白时，它开始工作。

于 2018-04-06T13:54:18.690 回答