New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sass/SCSS does not enable/recognize the use of CSS Grid Layout's named lines & template area syntax #1963
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. |
@chriseppstein Thanks for the clarification regarding example 2, being aware of #216, didn't think it'll apply to CSS constructs in addition to Sass constructs such as maps… Didn't think to write my intended value for |
Example 1 will require some non trivial changes to our parser. From the spec, we need to be able to parse Our parser will allow any list (both space and comma delimted) to be wrapped in brackets. Those brackets will be printed if the list is output directly to the CSS output. In this sense, brackets are like quotes on strings. New List API Example$bracket-list: [foo bar];
$header-1: nth($bracket-list, 1); // => foo
$space-list: unbracket($bracket-list); // => foo bar
$given-brackets: bracket((a b c)); // => [a b c]
$bracket-list-separator: list-separator($bracket-list); // => space
$is-bracketed: is-bracketed($bracket-list); // => true Note that all of the above examples would work with comma delimited lists. New List API ReferenceNew grammar for the script value parser: Ruby Value API Changes:
Sass API Changes:
Miscellaneous:
Things Worth Noting ™
|
I'm mostly on board. Just a couple nits. First, I think
I don't think this is right? You can write |
Agreed. I updated the spec above.
Good point. Removed. Another thing: We need to decide if brackets affect list equality. the separator does, but quotes in strings don't (which I increasingly think was a mistake). I updated the spec to address this. |
Can I suggest this feature be accompanied by a feature flag? |
@xzyfer I'm not opposed, but we create feature flags when the syntax is backwards compatible but the semantics change. What point would a flag serve? It would be a syntax error during compilation if the new syntax is encountered. |
I think the feature would be regarding the ability to parse the grid syntax. Library authors could (maybe?) fallback to string concatenation and unquoting. I'm not very familiar with the grid spec but off the top of my head this gets the job done. foo {
bar: unquote("[foo] 1 [bar] 2");
} Maybe the point is moot without conditional |
@xzyfer Exactly. All sass files are parsed and there's no way to avoid the syntax error by scripting. |
While the CSSWG reserves the right to use bracketed groups in arbitrary ways, I intend for it to only be used rarely, and to contain lists. I leave open as a reasonable possibility that future lists may be comma-separated. |
@chriseppstein @nex3 @tabatkins This all makes sense to me. Thanks @xzyfer for reminding me to not forget about the awesomeness of |
👍 |
Closes #1963. Tests in sass/sass-spec@fa503bd
This is implemented to spec, with the exception that we decided to use |
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 in the same boat as @chidoukaigwe I've read the above, but it's just very confusing and technical. I'm also using scout app and something like |
@chidoukaigwe @silaswanders This should just work as long as you're using a recent version of Sass. What version are you using, and what error are you seeing? |
I'm getting a similar error using node-sass (using libsass 3.6). Should I report it here? |
Errors from LibSass should be reported against https://github.com/sass/libsass |
ok, thanks @nex3 ! |
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
Example 2:
grid-template-areas
not being able to work w/ Sass/SCSSThe text was updated successfully, but these errors were encountered: