sass: Sass/SCSS does not enable/recognize the use of CSS Grid Layout's named lines & template area syntax

With the current versions of Sass/SCSS, users cannot reliably be able to use CSS Grid Layout Module Level 1’s named line syntax or its template.

It seems a moderate issue since the Grid Layout Module has had the latter a very mature & stable feature with its availability in modern browsers such as Edge (the others are removing Grid Layout module from their flag real soon) for some time (+2 years) & the former has also been a stable feature in the spec for years now but merely had named lines surrounded by square brackets (see example below) about ~6-8 months ago.

With the module mature enough to consider for serious prototyping with it & legitimate anticipation for its availability this year in Safari 7 & upcoming versions of Firefox & Chrome this year outside of flags, it seems worthwhile to make this officially an issue.

Example 1: Named line syntax not being able to work w/ Sass/SCSS

The following code utilizing CSS Grid named lines capabilities will error out by Sass


.wrapper 
  display: grid
  grid-template-columns: [col1-start] 9fr [col1-end] 10px [col2-start] 3fr [col2-end] // This will cause Sass to throw errors 
  grid-template-rows: auto

Example 2: grid-template-areas not being able to work w/ Sass/SCSS

.wrapper 
  display: grid
  width: 90%
  margin: 0 auto
  grid-template-columns: 9fr 1.875em 3fr
  grid-template-rows: auto
  grid-template-areas:   
    "header header header"
    "content . sidebar"
    "footer footer footer"
    // ^ The following will throw 

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 19 (5 by maintainers)

Commits related to this issue

Most upvoted comments

For example 2, this is merely formatting, the browser will happily recognize the following:

.wrapper 
  // ...
  grid-template-areas: "header header header" "content . sidebar" "footer footer footer"

So this aspect is a duplicate of #216.

How does this work? - I am trying to implement CSS Grid names within my SASS which is being compiled by Scout App - I have read the above information, but I am still confused on how to implement it. Can somebody help me please?

I’m getting a similar error using node-sass (using libsass 3.6). Should I report it here?