With the version 1.10 I am having following error when using css variables:

413:1  error  Please check validity of the block starting from line #413  Fatal

So it is not an enhancement anymore but an issue

Have the same issue. Since CSS custom property not equal to Sass variables we have too many reasons to have both in sass file.

Hi guys, you need to report this to Gonzales-pe which is the AST we use.

The fatal errors you're encountering are because the AST doesn't currently support CSS variables / modules

Seems like this issue is related tonyganch/gonzales-pe#197

If this is any help to anyone, I've managed to get around this by changing

:root {
  --custom-var: white;
}

to

:root {
  #{--custom-var}: white;
}

Not great but it suppresses the error thrown for the time being. I've not found any issues yet.

@HHogg , Thanks, your solution works!

@HHogg, have you found a way to handle multiple vars within a single block? I get a no-duplicate-properties error thrown by the linter with:

.foo {
  #{--bar}: red;
  #{--baz}: blue;
}

Sorry @robsterlini I cant remember. I stopped using Sass a couple of years ago, and swapped to PostCSS/CSS Next.

Is there any progress on this?

Related:

Request to allow the no-color-literals rule to accept css var() statements.

no-color-literals:
  - allow-css-variables: true

Would allow:

.background {
  background-color: rgba(var(--my-background-rgb), var(--my-background-alpha));
}

Would it be possible to get an update on the progress of this issue? It's been almost 3 years since the bug was reported.

Seems that this (tonyganch/gonzales-pe#290) had been resolved by tonyganch/gonzales-pe#295

@robsterlini Have you find a fix for no-duplicate-properties on css variables

i'm still getting the no-duplicate-properties error

@robsterlini Have you find a fix for no-duplicate-properties on css variables

i'm still getting the no-duplicate-properties error

Sadly not, I have been using // sass-lint:disable to force those rules to be ignored in those instances.