Is there a way to use SASS lighten() and darken() with CSS variables?

Question

Is there a trick or way to use Sass lighten() and darken() with CSS variables? (I have to use css variables)

//.scss

    :root{
        --my-color: #ff0000;
    }
    
    // method 1 :
    $my-color-darken: darken(var(--my-color), 15%); // not working
    
    // method 2 :
    $my-color: var(--my-color);
    $my-color-lighten: lighten($my-color, 15%); // not working

score 0 · Answer 1 · answered Oct 29 '20 at 16:51

Unfortunately this is not possible. The reason is that css variables are working on runtime, and sass is build on compile time. In this case I will advice to use sass variables. You already are using it, so it dose not matter if you use one more feature from it. On top of all, not using css variables will improve browser compatibility.

in the case you still want to use css variables for most of the application. you can do something like this:

$my-color: #ff0000;

:root{
    --my-color: $my-color;
}

$my-color-darken: darken($my-color, 15%); // not working

Is there a way to use SASS lighten() and darken() with CSS variables?

1 Answers1