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

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>

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