Vscode: [scss] scss map syntax showing as an error

[gregornoriskin]

If I add a map to a scss file, e.g. "$map: (key1: value1, key2: value2, key3: value3);" it shows as an error. Red squiggly appears under the ":" after the first key and hover message reads ") expected". Despite the error in editor node-sass evaluates map-get correctly over it.

[aeschli]

We don't support the map syntax yet

[basvandenheuvel]

Any roadmap on when this will be solved?

[egamma]

It is not on top of our backlog currently, sorry.

As a workaround you can disable the built-in validation using

    "sass.validate": false

EDIT corrected to false thanks @rob3c for catching it.

and install extension like stylelint.

[rob3c]

Thanks for the pointer to stylelint. I'm guessing that should be "sass.validate": false instead of true to disable the built-in validation to allow stylelint to work without conflict?

[basvandenheuvel]

Any info on this topic :)?

[senseiweb]

bumping this, check to see the current pulse - thanks.

[VishalGulati]

any update on this one? I made the setting in settings.json i.e. "sass.validate": false as suggested but still got the same error.

[VishalGulati]

update: "scss.validate": false worked!!

[jwatkin]

Is there a way to vote this up? The basic template provided in a Foundation 6 project contains maps assigned to variables in the default _settings.scss file. I'm new to Sass and Visual Studio Code but so far this seems like a common use case. Thank you.

[gizm0bill]

there's also a validation error when trying to declare a rule with a variable in its name
For example: .#{$color-type} { ... warns: [scss] at-rule or selector expected

[ChiriCuddles]

@aeschli @egamma Do you accept pull requests for this? And if so what do I need to do? I have the multi-arg @each working, trying to get the map assignment done atm but that's harder cause it seems to parse w/ cssParser, and it'd probably be silly to have map parsing in that

EDIT: I now more or less know how this is set up, and have real implementations for maps and multi-arg @each. I also wrote a few parsing tests, but haven't added/implemented any scope changes (it probably won't need them?) One issue I stumbled upon was that vscode is highlighting the entire map thinking it's one value tho--not sure where to look to fix that one. Anyway, my code is in my fork if you want to check them out/use them to jumpstart an official implementation

[egamma]

@Aarilight

Do you accept pull requests for this?

In general yes, but I defer to @aeschli whether he has specific concerns. @Aarilight pls keep in mind that we are slower to respond over the holidays and most of the team is on vacation.

[ChiriCuddles]

@aeschli that doesn't add map support to @each, does it? @each can get a comma-separated list of variables from either map entries (two vars, one for prop and one for val), or lists within lists (in which case you can get a var for each sub-list item). Without @each support maps are still kinda annoying to work with in vscode. My fork adds in support for multi-var @each, for reference.

[aeschli]

Thanks for pointing that out. I added support for multiple variables.