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

- Robert Bepko

---

CSS网格模板区域ASCII艺术与.scss语法完美配合，但在尝试后，.sass无法正常工作。当然，.scss与CSS相同。希望.sass能够正常工作以保持代码的整洁性。如果有人知道任何关于.sass在此处工作的讨论（或秘密技巧使.sass与grid-template-areas的ASCII部分兼容），请告诉我...提前感谢... - Robert Bepko

Robert，我通常使用SASS语法，但有时需要使用SCSS。我只能硬着头皮写SCSS。 - Brad

@Brad，你使用 .sass 与 CSS 网格 ASCII 艺术布局特性成功了吗？如果是，请提供语法（请参见上面代码中断点处的注释）。在 .scss 形式下它可以正常工作。非常感谢您的帮助。 - Robert Bepko

我没有使用过网格ASCII艺术布局。但我想它应该可以正常工作。 - Brad

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 语法（带大括号和分号），则没有这种限制。

- keithjgrant

---

谢谢Keith。一个简单的修复就能改变世界！工作演示非常完美。最好的。 - Robert Bepko

@atilkan请将grid-template-areas中的项目之间的空格去掉。 - Renato Francia

@RenatoFrancia 他们必须排成一行吗？这是关键点吗。 - atilkan

似乎最近Sass有些更改。现在正在查看新的方式如何运作... - keithjgrant

Answer 2

我使用sass作为css的预处理器，其中包含网格。一开始遇到了几个问题，结果是没有呈现出网格。我首先认为在“grid-template-area”中有一些限制（在sass中），关于内容/行数的数量。我缩小了具有相同问题的行。最后，在运行文件比较程序中的差异之后，我意识到sass在空格方面很敏感。当清除“grid-template-areas”块之间的空白空间时，它开始工作。

- Toolbox