CSS Custom Properties

With CSS variables you can write rules that reference a single value. Suppose you wrote this series of rules:

p {
  color: black;
}
h1 {
  color: black;
}
h2 {
  color: black;
}

Then one day you decide to change all the black values to brown. You could do it manually. But, by using CSS custom properties (sometimes called variables) you could write it once, and then change it in one location.

Use the var() function to refer to the tokens.

:root {
  --color-text: brown;
}
p {
  color: var(--color-text);
}
h1 {
  color: var(--color-text);
}
h2 {
  color: var(--color-text);
}

Now, anytime you change that root variable, the value will change wherever that root variable is used. For small, simple stylesheets you might not ever need this, but on larger, more complex stylesheets its a great feature. Custom properties can be used for any property value that you’d need to use.

This knowledge will be more useful as we make more advanced styles.