CSS Variable Generator
Note: Name tokens by role rather than appearance. --color-danger survives someone deciding errors should be orange; --color-red becomes a lie that day.
The consequence worth designing around is that reassignment is scoped. Setting --spacing on a card changes it for that card and everything inside it, and nothing else. This makes a card that needs tighter internal rhythm a single override rather than a new set of classes — but it also means a variable defined on a component is invisible to its siblings, which is the usual cause of a token that mysteriously has no effect.
The generator produces four scales because those are the ones that drift. Spacing on a 4px base, type on a modular ratio, radius, and a colour ramp. Ratios matter here: 1.25 gives a gentle scale suited to interfaces, 1.333 is more editorial, 1.5 gets dramatic quickly and runs out of usable sizes after four steps.
On naming — the most consequential decision and the one made fastest. Name by role, not by appearance. --color-danger survives a redesign; --color-red does not survive the day someone decides errors should be orange. The same applies to --space-4 against --space-16px, where the second is a lie the moment the base changes.
The dark theme block reassigns tokens rather than restating rules, which is the whole point.
Frequently Asked Questions
Custom properties or Sass variables?
Custom properties for anything that might change at runtime or vary by context — themes, component overrides, values JavaScript touches. Sass variables for build-time constants like breakpoint values, which cannot be custom properties anyway since media queries cannot read them.
Why is my variable not working?
Almost always scope. A custom property is only visible to the element it is set on and its descendants, so one defined on a component cannot be read by a sibling. Define shared tokens on :root, and use component-level definitions deliberately, for overriding.
Should I name by colour or by role?
By role, always. --color-danger still makes sense after someone decides errors should be orange; --color-red becomes a lie. The same logic applies to --space-4 over --space-16px — the second bakes in a value that the whole point of a token is to let you change.
Can I use custom properties in a media query?
Not in the condition. @media (min-width: var(--bp)) does not work, because media queries are evaluated before the cascade computes custom property values. Breakpoints have to stay as literals, or as preprocessor variables if you want them named.
How do I change a variable from JavaScript?
element.style.setProperty('--name', value) sets it, and getComputedStyle(element).getPropertyValue('--name') reads it back. Setting it on document.documentElement changes it globally, which is how a theme toggle usually works.
