State-Based Variables

State Variables

Change CSS variables to reflect UI state — open/closed sidebars, active nav items — instead of toggling many classes.

Example

.sidebar { --w: 240px; width: var(--w); transition: width 0.3s; }
.sidebar.collapsed { --w: 60px; }
.nav-item[aria-current="page"] { --bg: var(--primary-light); background: var(--bg); }

CSS

Full Editor

Pro Tip

One variable change can update multiple properties at once across the component.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned