CSS grid＆Sass

CSS工作组成员Rachel Andrews在会议视频中提到Sass与新的CSS网格规范兼容。那么，有没有人知道为Sass的网格模板区域分隔“ASCII艺术”的语法？自从检查了Sass文档并且找不到任何东西（还）。我得到的错误涉及间距。欣赏社区中的任何指针。如果没有，回的.css直到那时（：谢谢...CSS grid＆Sass

.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

来源

2017-03-22 Robert Bepko

所以CSS grid-template-areas ASCII艺术可以很好地处理.scss语法，只是在玩弄它之后不会.sass。当然.scss与CSS完全相同。希望.sass会努力保持清洁。如果有人知道任何关于.sass在这里工作的讨论（或秘密黑客使得.sass与grid-template-areas的ASCII部分一起工作），那么很想看看...在此先感谢... –

Robert，我总是使用SASS语法，但有些情况下需要使用SCSS。我只是咬紧牙关，写SCSS。 – Brad

@Brad您是否已成功使用.sass与CSS网格ascii艺术布局功能？如果是这样，寻找语法（参见上面代码中的注释，它在哪里破坏）。它在.scss窗体中工作正常。提前致谢。 –

网格模板区域必须用引号引起来的每一行是一个字符串：

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

全working demo here

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

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

codepen上的链接演示已更新为匹配。如果使用SCSS语法（使用大括号&分号），则不存在此限制。

来源

2017-03-31 15:13:13 keithjgrant

谢谢基思。一个简单的修复，使世界的不同！工作演示非常完美。最好的 –

它不起作用。 – atilkan

@atilkan删除网格模板区域中的项目之间的空格。 –

回答

相关问题