var()
Function Baseline: widely availablesince October 2019
MDN The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
:root {
--color-a: pink;
--color-b: green;
--color-c: rebeccapurple;
}
#example-element {
border: 10px solid black;
padding: 10px;
}<section class="default-example" id="default-example">
<div id="example-element">
Three color options have been set on the :root use these to change the
border color.
</div>
</section>Syntax
var( <custom-property-name> , <declaration-value>? )Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Browser support
| Chrome | 49 |
|---|---|
| Edge | 15 |
| Firefox | 31 |
| Safari | 9.1 |
| Chrome Android | 49 |
| Safari iOS | 9.3 |
First version with support, from MDN browser-compat-data.