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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.