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刪除網格模板區域中的項目之間的空格。 –

回答

相關問題