CSS custom properties don't have to be valid CSS properties
A custom CSS property doesn't have to be a valid CSS property on its own.
For example, you can define a color as three numbers between 0 and 255 for red
green and blue. A list of three numbers is not a valid color definition in CSS.
But you can use them in the rgb()
function to get a valid color. Using the
rgba()
function it's possible to get variants with transparency of our
original color.
:root {
--color-primary: 94, 142, 194;
}
.my-box {
border: rgb(var(--color-primary)) 2px solid;
background-color: rgba(var(--color-primary), 0.4);
}