DEV Community

loading...

The Var() css function

vish448 profile image Vishang ・1 min read

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

browser compatibility

Discussion (0)

pic
Editor guide