CSS Variable
CSS allows you you use variable. This is called CSS custom property.
Declare variable like a property, but with the property name with prefix of 2 hyphens, like this:
--xx: red
Then, use it like this:
color: var(--xx)
Here is example.
something
<div class="xyz">something</div>
:root { --xx: pink; --yy: 2rem; --zz: solid thin red; } div.xyz { color: var(--xx); font-size: var(--yy); border: var(--zz); }
The :root
means root of the HTML or XML. You can also use html
, but :root
is better because in XML (example: SVG), the root is not html
.
There must be no space after var
.
Technically, CSS variable is called a CSS custom property. You should think of it as custom property, because, it is used just like properties, with the same cascading precedence for their scope, and overwriting a value is also the same as CSS cascade.
Browser Support
CSS custom property is supported by all major browsers since 2017 Jan, except Internet Explorer.