Failing to load css variables with sass variables?

I am using reveal.js with customized css and chosen compiler. But the following code produces error as following.


custom_theme_compile = true
transpiler = "dartsass"
outputStyle = "compressed"


$red-h: 3;
$red-s: 75%;
$red-l: 55%;
$red-a: 1;
$red: hsl($red-h, $red-s, $red-l);

.reveal .palette1 {
    --main: #{$red}; (tried $red, doesn't work either)
    .card1:hover {
        background-color: lighten(var(--main), 10%);

I have checked SASS breaking changes section. None of the #{$red} $red works.


argument $color of lighten($color, $amount) must be a color

i might be wrong, but i dont think lighten supports css custom property as an argument.

That would make sense as lighten() is processed statically while a custom CSS property is processed at page load. If lighten() were a CSS function it would be different, but it is a SASS function.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.