Yesterday, I mentioned that I love CSS variables. Today, I thought I’d explain what they are and how they work, for those who aren’t already familiar with them. Let’s dig in! How to define CSS variables You define a CSS variable by typing its name with a leading double-dash (--). It uses the same syntax a typical CSS property—--{name}: {value}—and must be defined on an element. p { --size: 1rem; } You can then use your CSS variable just like you would any other property value by wrapping it in var().