cannot assign SCSS values to css custom properties (css variables)

Question

To ensure readability and maintainability, I would like to declare several values like colors for example, but only once.

The problem I have is that it seems impossible to assign the result of a sass function or even simple variables directly to css variable.

.some-selector {
    --my-css-variable: $my-color; // nope
    --my-css-variable: mySassFunction(); // nope
    --my-css-variable: transparentize($my-color, .5); // nope
    --my-css-variable: copy-pasted-value; // alright
}

I can't seem to find any answer on search engines, always finding irrelevant topics at best. Could you help me?

Answer 1

Try with interpolation #{...}

$my-color: #fff;

@function myFunction() {
    @return #000;
}

.some-selector {
    --my-css-variable: #{$my-color}; 
    /* output: --my-css-variable: #fff; */
    --my-css-variable: #{myFunction()}; 
    /* output: --my-css-variable: #000; */
}