CSS Variable

CSS Variable

The var() function is used to insert the value of a CSS variable.

CSS variables can access DOM, which means you can create variables with local or global scope, change variables using JavaScript, and change variables based on media queries.

A good way to use CSS variables involves design colors. You can put them in variables without having to copy and paste the same color over and over.

Traditional method

The following example shows the traditional way of defining some colors in the style sheet (by defining the color to be used for each specific element):

Instance

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;
}

Try It Yourself

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:

var(name, value)
Value Description
name Required. Variable name (starting with two dashes).
value Optional. Fallback value (used when the variable is not found).

Note:Variable names must start with two dashes (--), and are case-sensitive!

How var() works

Firstly: CSS variables can have global or local scope.

Global variables can be accessed/used throughout the document, while local variables can only be used within the selector where they are declared.

To create a variable with global scope, declare it in the :root selector. The :root selector matches the root element of the document.

To create a variable with local scope, declare it in the selector where it will be used.

The following example is the same as the above example, but here we use the var() function.

Firstly, we declare two global variables (--blue and --white). Then, we use the var() function to insert the values of the variables later in the style sheet:

Instance

: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;
}

Try It Yourself

The following are the advantages of using var():

  • Make the code easier to read (easier to understand)
  • Make it easier to modify color values

To change the blue and white to softer blue and white, you just need to modify the values of two variables:

Instance

: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;
}

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Function

Function Description
var() Insert the value of the CSS variable.