CSS variables reference

Recipes

Define a global variable

:root {
  --primary: blue;
} 

Use a variable

Without a fallback:

.some-component {
  color: var(--primary);
}

With a fallback:

.some-component {
  color: var(--primary, pink);
}

Other notes

• Variables can be overridden at a selector level in which case the override cascades downwards for all children elements too.