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?

Romain Vincent · Accepted Answer · 2018-10-30 13:12:21Z

8

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; */
}

edited Oct 30, 2018 at 13:12

Romain Vincent

3,8703 gold badges26 silver badges33 bronze badges

answered Oct 30, 2018 at 13:06

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Romain Vincent Over a year ago

how do you do with the result of a function directly?

Romain Vincent Over a year ago

just found out you could wrap functions in interpolation brackets as well! :)

Ian Kirkpatrick Over a year ago

I have looked for a solution for this for months!

Jeff Over a year ago

Very helpful, thanks. Found some further info here on why this is required: sass-lang.com/documentation/style-rules/declarations/…

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related