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

This article has been published on on my blog. Here's a list of all articles if you're interested in this kind of stuff.

Tags: til,CSS