Neon DistrictISSUE #8 of 50

var() · fallback · scoping

PrismaVSJank the Janitor

Prisma saysvar() takes a fallback, and variables can be scoped to any element, not just :root.

var(--gap, 16px) uses 16px if --gap isn't defined. Because variables inherit, you can scope one to a component: set --accent on a card and only that subtree changes. This local override pattern builds themeable components cleanly.

Power-ups you unlock

var(--name, fallback) guards undefined vars
Variables inherit → scope them to a subtree
Override on a component to re-theme just it
Combine global defaults with local overrides

Jank the Janitor attacks — common mistakes

Relying on a var that may be undefined, no fallback
Over-scoping and losing the global theme
Assuming a scoped var leaks back up

Boss battleSet a global --accent, then override it on one card so only that card recolors.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>:root{--accent:#b388ff}.card{border:2px solid var(--accent);color:var(--accent,#fff);padding:14px;margin:6px}.alt{--accent:#8aff9d}</style></head><body style="background:#06040d"><div class="card">global accent</div><div class="card alt">scoped override</div></body></html>

▶ Open the interactive comic issue

‹ Variables · Custom Properties · --Var Calc() · Math In Values ›