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.
var(--header-color, grey);
syntax
var( custom-property-name , declaration-value)
The first argument to the function is the name of the custom property to be substituted, An optional second argument to the function serves as a fallback value. if the custom property referenced by the first argument is invalid, the function uses the second value.
custom-property-name: represented by an identifier that starts with two dashes. custom property solely uses by authors and users.
declaration-value: the custom property's fallback value. which is used in case the custom property is invalid in the user context.
Take a look at codepen example
Browser Compatibility
Top comments (0)