I have created a css variable in the body, and it holds the hsl value of the color I need.
–my-color: 27,74%,55%;
When I set the background color within the builder, in the raw field I write:
hsla(var(–my-color),.5)
and before hit enter I can see it works fine.
As I hit enter the code changes to
hsl(var(–my-color,0.5))
Hi,
Welcome to the forum, and thanks so much for your report!
Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a screencast showing and explaining what’s going on?
Best regards,
timmse
Aaah I see. Please put the variables in :root{} instead of the body tag. Then it works as expected 
Changed body to :root, no luck. Same behaviour when hitting enter.
I created a new template, set the background color → issue persist.
I moved all the :root{variables} in the custom CSS of Bricks settings → issue persist.
I moved my variable in the css element itself, as of root{–my-color:13,13%,13%;}, still same issue.
I declared another variable “–alpha:0.5”, in the raw field I write:
hsla(var(–my-color),var(–alpha)) → hit enter → hsla(var(–bookings–alpha))
The issue keeps being there.
I wonder If I am doing something wrong elsewhere as I am confident it works if you say so.
Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase? 
I think your syntax is wrong:
example:
–base-trans-80: hsla(var(–base-h), var(–base-s), var(–base-l), .8);
Try it like this and use var(–base-trans-80) in the colorfield.
You need to store the whole color in a variable (as far I tested it).