CSS Custom Properties

CSS Custom Properties (sometimes referred to as CSS Variables) allow you to define variables that can be used throughout a document.

Basic usage

Seting a variable on :root defines it globally:

:root {
  --title-font-size: 1em;
}

You can also limit the scope of variables by defining them on any element, like this:

header {
  --fg: red;
}

Use the var function to lookup a variable:

header .title {
  font-size: var(--title-font-size);
  color: var(--fg);
}