How do I use rgba in scss as a css variable?

Question

I currently have the following using dart sass...

color: rgba(144, 202, 249, 0.5);

I would like to make it a css variable so I tried this...

--background-color: rgba(144, 202, 249, 0.5);
...
background-color: --background-color;

But I get

Error: expected "{".
  ╷
1 │ --background-color: rgba(144, 202, 249, 0.5);

I also tried...

--background-color: 144, 202, 249;
--opacity: 0.5;
...
background-color: rgba(var(--background-color), var(--opacity));

But still no dice

Error: expected "{".
  ╷
1 │ --background-color: 144, 202, 249;

Answer 1

Make sure you're defining your variable properly in the appropriate scope. Your initial color syntax is correct. Also be sure to reference the color with var(--name) (missing in your first code snippet).

 .root { --background-color: rgba(144, 202, 249, 0.5); }.example { height: 200px; width: 200px; background-color: var(--background-color); }

 <div class="root"><div class="example" /></div>