Any Way to Use CSS Variables in SASS Functions

Getting the true value of a CSS variable

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));

CSS variables and SASS functions

Try this --gap-l: #{toRem(10)};, the #{} syntax is called interpolation. In the experience of heading bugs myself, when you want to use a SASS expression's raw value along with normal CSS, if you can't use the concise syntax like just toRem(10), try adding interpolation to see if it works.
Another example:

$padding: 5px;
.element {
  width: calc(100% - $padding); // will not work, it must be:
  width: calc(100% - #{$padding});
}

Here is the code with the updated question: https://jsfiddle.net/bcw763en/.
Notice that if you put :root above the @function, it'll not work.

Related Topics