CSS 网格和 Sass答案

【问题标题】：CSS grid & SassCSS 网格和 Sass
【发布时间】：2017-03-22 16:28:15
【问题描述】：

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

【问题讨论】：

所以 CSS grid-template-areas ASCII 艺术作品与 .scss 语法配合得很好，只是在玩弄它之后就不是 .sass 了。当然 .scss 与 CSS 相同。希望 .sass 能够保持清洁。如果有人知道关于 .sass 在这里工作的任何讨论（或使 .sass 与 grid-template-areas 的 ASCII 部分一起工作的秘密黑客），很想看看......提前致谢......
Robert，我一直使用 SASS 语法，但有时需要使用 SCSS。我只是硬着头皮写 SCSS。
@Brad 您是否成功地使用了带有 CSS 网格 ascii 艺术布局功能的 .sass？如果是这样，请寻找语法（请参阅上面代码中的注释）。它以 .scss 形式运行良好。提前致谢。
我没有使用网格 ascii 艺术布局。但我想它会工作得很好

标签： css sass css-grid

【解决方案1】：

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

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

完整的working demo here

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

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

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

【讨论】：

谢谢基思。一个简单的修复，让世界变得不同！工作演示非常完美。最佳
@atilkan 删除网格模板区域中项目之间的空格。
@RenatoFrancia 他们必须排队吗？这是重点吗？
看起来在最近的 Sass 更新中发生了一些变化。现在看看新方法是如何工作的……

【解决方案2】：

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

【讨论】：