CSS Variables

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

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

Global Scope

To create a variable with global scope, declare it inside the :root selector.

This div uses CSS variables for background color, text color, and padding.

Example

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
  color: var(--white);
}