Search code examples
csssassmixinscss-variables

Sass breaking due to CSS custom properties?

Say you have the CSS custom property for a color:

--color: 255,0,0

And you want to mix it specially every time with rgb or rgba as the need requires. This is valid CSS:

rgba(var(--color), .3)

...but Sass explodes. I've been trying to see if I could write a mixin or something but I can't figure out how to get around Sass's insistence on using it's own color functions even when they are not necessary.

Solution

  • Got it! This is a bit hacky but this allows you to create a custom function that utilizes the rgba() function with CSS custom properties (as allowed in the spec):

    @function swatch($swatch-color, $swatch-alpha:1) {
  @return unquote("rgba(var(--#{$swatch-color}), #{$swatch-alpha})");
}
:root {
  --green: 0,255,0;
}
.green { color: swatch(green, .1); }

    Found the key to the solution in a Sass bug report. This only works because the unquoting and interpolation bypass the default rgba() function.