question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 

Issue Analytics

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

github_iconTop GitHub Comments

13reactions
chriseppsteincommented, Jan 11, 2016

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.

8reactions
chidoukaigwecommented, Jan 21, 2018

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS grid & Sass - Stack Overflow
I have used sass as pre-processor for css incorporating grid. ... (in sass) about amount of content/lines in the "grid-template-area".
Read more >
Improving CSS Grid workflow with SASS - Lisi Linhart ‍
A central question to ask before creating a CSS Grid, is if your grid-items are overlapping. No overlap. If you don't have overlapping...
Read more >
Flexbox & Sass Grid Tutorial: How to Streamline Responsive ...
In this experiment, we'll look into Flexbox layouts and how they allow for graceful implementations of layouts without doing any crazy hacks. Also,...
Read more >
Issue 148293008: [CSS Grid Layout] Add support to place ...
[CSS Grid Layout] Add support to place items using named grid lines Currently our code assumes that a <custom-ident> in grid-{column|row}-{start|end} and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found