1

When you assign a CSS var() variable to an Sass variable like this:

--color: #FFF;
$color: var(--color);

This will result in $color holding the var(--color) as a value. Is there a way so it would hold the actual CSS #FFF value? So $color would save the #FFF instead of var(--color)?

This would be great so you can use the css variables in more complex functions and media queries where var() isn't allowed.

SaroGFX
  • 699
  • 6
  • 20
  • 1
    no you cannot ... – Temani Afif Apr 06 '22 at 14:52
  • 2
    Maybe this answer, to a similar question, helps. [Any way to use CSS Variables in SASS functions?](https://stackoverflow.com/a/70672476) – Sett Apr 06 '22 at 14:55
  • 1
    You could do the opposite way. You would create sass variables with fixed value, and convert them to custom properties through a mixin. Would that be ok for you ? – Amaury Hanser Apr 06 '22 at 15:53
  • The framework uses css variables to overwrite. But for each color there is always a second variable with the RGB numbers as value. So it's a little bit of housekeeping, but it does allow to use it in Sass variables, functions and rgba() notations. So this is a good solution, thanks. – SaroGFX Apr 07 '22 at 07:59

1 Answers1

0

Not possible directly, but an alternative is to keep the rgb or hsl value instead of a hex value.

--color: 129, 19, 29;
$color: rgb(var(--color));

You could specify 2 variables for each like below, to have both options available.

--color: #554784;
--color-rgb: 129, 19, 29;

Or just always use the rgb(a) notation

color: rgb(var(--color));
SaroGFX
  • 699
  • 6
  • 20