Skip to content

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

Closed
@lozandier

Description

@lozandier

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 

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions