Call SCSS function with dynamic values

Question

I am working in Angular and use SCSS for my styles. I can declare a variable and reuse it later in SCSS like this: $color-accent: #30bdff; $color-accentLight: mix(white, $color-accent, 90%);

But what if the user want to change the 'color-accent' value ? What if this value should be a dynamic value? Of course I can use the 'setProperty' function in my typescript file like this: document.documentElement.style.setProperty('--dynamicValue', #30bdff); And in the SCSS : $color-accent: var(--dynamicValue);

Now if I want to directly use this value it will work. like this:

***.mainContent{ Color: $color-accent }

---

But my problem begins when I want to reuse this variable in a SCSS function like: min, max, darken, lighten... Because this function need to have a color as their input and doesn't except a variable which contains a var(--) value. I checked a lot, and I saw many similar questions, but could not find any answer of my problem. Am I forced to not use any SCSS functions, if I want to get the value dynamically?

tnx in advance for your help

I tried to pass a variable into the SCSS function, or even search for a SCSS function which convert string into Color object, but could not find any

Answer 1

SCSS is compiled into CSS.

That means when you run ng build, your SCSS gets transformed into CSS.

At this moment, all functions are processed, all variables too, etc.

In the end, you end up with a compiled, STATIC CSS file.

So no, you won't be able to use SCSS functions like you wish to.

On the other hand, you can probably find JS librairies that can achieve the same result, use them, then use the result of it to style your component dynamically.