CSS grid＆Sass

Question

CSSワーキンググループのメンバーRachel Andrewsは、会議ビデオでSassが新しいCSSグリッド仕様と互換性があると述べました。それで、Sassのグリッドテンプレート領域に "ASCII art"を配置する構文を知っている人はいますか？私は以来、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

Answer 1

グリッドテンプレート領域が引用符で囲む必要があり各行は単一の文字列です：フル

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構文（中括弧&セミコロン）を使用する場合、この制限はありません。