Scoped Variables
A variable defined on an element overrides the :root value for that element and its descendants.
CSS
Intermediate
3 min read
Variable Scoping
Example
:root { --color: blue; }
.sidebar { --color: green; }
p { color: var(--color); } /* outside .sidebar → blue, inside → green */ Pro Tip
Use scoped variables for component-level theme overrides without extra class names.