Sass/SCSS does not enable/recognize the use of CSS Grid Layout's named lines & template area syntax
See original GitHub issueWith 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
Issue Analytics
- State:
- Created 8 years ago
- Comments:19 (5 by maintainers)
Top GitHub Comments
For example 2, this is merely formatting, the browser will happily recognize the following:
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?