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