var()
Quick Summary for var()
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.
Code Usage for var()
:root {   --main-bg-color: pink; }  body {   background-color: var(--main-bg-color); } 
More Details for var()

var()

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.

The var() function cannot be used in property names, selectors or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

Syntax

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.

var( <custom-property-name> , <declaration-value>? )

Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue; that is, anything between the first comma and the end of the function is considered a fallback value.

Values

<custom-property-name>

A custom property's name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

<declaration-value>

The custom property's fallback value, which is used in case the custom property is invalid in the used context. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. ), ], or }, top-level semicolons, or exclamation marks.

Examples

Using a custom property set on :root

:root {   --main-bg-color: pink; }  body {   background-color: var(--main-bg-color); } 

Custom properties with fallbacks for use when the property has not been set

/* Fallback */ /* In the component's style: */ .component .header {   color: var(--header-color, blue); /* header-color isn't set, and so remains blue, the fallback value */ }  .component .text {   color: var(--text-color, black); }  /* In the larger application's style: */ .component {   --text-color: #080; } 

Specifications

Specification
CSS Custom Properties for Cascading Variables Module Level 1 # using-variables

See also

env(…) – read‑only environment variables controlled by the user‑agent. Using CSS variables Select your preferred language English (US)EspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk
Random CSS Property

<color>

The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.
rgb() css reference