CSS custom properties can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write this.
In short: they can contain just about everything. It’s only until CSS Custom Properties are used in a certain context as a CSS Variable — using
var() — that they are evaluated.
☝️ To understand the above you should know that CSS Custom Properties are not Variables
A CSS Custom Property allows you to define a property with a certain value, e.g.
It’s only when it’s used with
var() — e.g.
var(--width) — that you are creating a CSS Variable to use.
That’s why you can use CSS Custom Properties to:
- perform conditional calculations
- inject skin tone / hair color modifiers onto Emoji
- toggle multiple values with one custom property (