CSS variables are very different from preprocessor variables. While preprocessors use variables to compile a static piece of CSS, CSS custom properties are a reactive (i.e. live) part of the styles. Think of them like usual CSS properties that cascade, but have:
--color
)var(--color)
)CSS variables are a means to store CSS values with elements and have them cascade according to the DOM structure instead being based on the CSS structure (as it is in preprocessors). This open up a whole new set of possibilities, especially for adapting components. E.g. button styles could be changed by simply setting a variable, with no need to even know what CSS properties use that value.
They're supported by all modern browsers Show archive.org snapshot .
body {
--shadow-color: gray;
}
button {
box-shadow: .1em .1em .1em var(--shadow-color);
}
button:hover {
--shadow-color: skyblue;
}