How to implement SASS color functions in raw CSS

Issue

SASS has functions which can compute a new color given some variables as input. Specifically, I'm using:

• https://sass-lang.com/documentation/modules/color/#mix
• https://sass-lang.com/documentation/modules/color/#lighten
• https://sass-lang.com/documentation/modules/color/#darken

CSS now also has variables and some related builtin functionality like https://developer.mozilla.org/en-US/docs/Web/CSS/filter.

I also managed to implement lighten/darken by using hsl(var(--my-hue), var(--my-saturation), calc(var(--my-lightness) + 10%)).

Does anyone have any suggestions on whether it's possible to implement/hack mix in pure CSS (the source code of mix) - maybe also using some representations like rgba/hsl and calc expressions?

Solution

If we look at the Sass documentation for color.mix()/mix():

Returns a color that’s a mixture of $color1 and $color2.

You could consider the color-mix() CSS function. MDN describes it as:

The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.

Thus I would determine that color-mix() would be the closest native-CSS implementation of Sass's color.mix()/mix().

Answered By - Wongjn