Can't use CSS Variables inside of filter grayscale with SCSS

Question

I'm trying to make the 100% in filter: grayscale(100%); be a CSS variable so I can dynamically change it later with JavaScript.

--percent: 100%;
filter: grayscale(var(--percent));

This is not compiling with Dart sass. It's telling me:

Dart Sass failed with this error: $color: var(--percent) is not a color. filter: grayscale(var(--percent));

Which doesn't make any sense to me as it works just fine with normal CSS.

How can I get this normal CSS Variable to work with Dart Sass?

Answer 1

Because it conflicts with the grayscale function of Sass and Sass-specific functions can't handle CSS variables.

Use it this way:

--percent: 100%;
filter: #{"grayscale(var(--percent))"};