The var() Function
CSS Variables - The var() Function
The value of a CSS variable can be inserted using the var() function.
Because CSS variables can access the DOM, you may use JavaScript to modify them, create variables with a local or global scope, and modify variables in response to media queries.
Using CSS variables for your design’s color scheme is a fantastic idea. You can use variables to store the same colors rather than repeatedly copying and pasting them.
The Traditional Way
The following illustration demonstrates how various colors are traditionally defined in a style sheet (by specifying which colors to use, for each unique element):
Example
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
Syntax of the var() Function
The var() function is used to insert the value of a CSS variable.
The syntax of the var() function is as follows:
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Note: The variable name must begin with two dashes (–) and it is case sensitive!
How var() Works
To begin with, CSS variables might be local or global in scope.
Local variables can only be used inside the selector in which they are declared, but global variables can be retrieved and used throughout the entire text.
Declare a variable inside the :root selector to give it a global scope. The root element of the page is matched by the :root selector.
Declare a variable inside the selector that will utilize it to generate one with local scope.
The example that follows is the same as the one above, but it makes use of the var() method.
Two global variables (–blue and –white) are first declared. Next, we enter the values of the variables later in the style sheet using the var() function:
Example
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
There are benefits to using var().
- increases the readability and comprehension of the code
- greatly facilitates changing the color values
All you have to do is adjust the values of the two variables to make the blue and white hue softer:
Example
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the var() function.
CSS var() Function
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |
