Inheritance
CSS variables inherit like other inherited properties. Use initial to unset a variable or provide fallbacks for missing values.
CSS
Intermediate
3 min read
Variable Inheritance and Reset
Example
:root { --gap: 1rem; }
.dense { --gap: 0.25rem; }
.grid { gap: var(--gap); }
.reset { --gap: initial; }
.el { color: var(--accent, var(--primary, black)); } Pro Tip
An undefined variable with no fallback makes the property revert to its initial value.