How to use "no commas" and "css custom properities" in a rgba value while using SCSS?

Question

I"m trying to use CSS custom properties in a rgba value. I am able to get the desired result in pure css, but when I test this out in codepen.io or my IDE that are both using scss, I am getting an error of: overloaded function `rgba` given wrong number of arguments . How can I incorporate this in SCSS

Here is a codepen that shows the error: https://codepen.io/tmocodes/pen/xxVdMEq?editors=1100 The below snippet works because it is not using SCSS.

:root {
  --color-primary: 29 4 247;
  --lighten: 10%;
}

#element {
  background-color: rgba(var(--color-primary) / var(--lighten));
  color: rgb(var(--color-primary));
}

<h1 id="element">Using CSS Custom Properities with opacity</h1>

Answer 1

To incorporate modern comma-free CSS color syntax with SCSS, I've used this workaround.

The reason this doesn't work is that it conflicts with the Sass rgb/rgba function. You can uppercase one or more letters to make Sass ignore it (being case sensitive). CodePen demo.

$color-primary: 29 4 247;
$color-secondary: 247 4 4;
$lighten: 10%;

#element {
  background-color: Rgba($color-primary / $lighten);
  color: Rgb($color-primary);
}

#element-2 {
  background-color: Rgba($color-secondary / $lighten);
  color: Rgb($color-secondary);
}

Answer 2

SCSS preprocessor has to computed the vales before it can be assigned to the css variables. Following approach might give you hint to approach the solution you are looking for.

rgba require 4 parameters

rgb require 3 parameters.

$blue: rgb(29, 4, 247);
$red: rgb(29, 4, 247);
$lighten: 10%;
:root {
  --color-primary: #{blue};
  --color-secondary: #{red};
  --lighten: #{lighten};
}
        
#element {
  background-color: lighten($blue, $lighten);
  color: $blue;
}

#element-2 {
  background-color: lighten($red, $lighten);
  color: $red;
}

I created the following CodePen, that gives the idea of how to combine scss with css variables.