CSS Variables (Custom Properties)
CSS Variables (Custom Properties) — Harness the power of CSS custom properties: define, scope, inherit, and manipulate variables for dynamic theming. The guide walks through What are CSS Variables?, Defining and Scoping, The var() Function, Dynamic Theming with Variables, Advanced Patterns. CSS Custom Properties (commonly called CSS variables) are entities that store specific values for reuse throughout a document. They are set with the -- prefix and accessed with the var() function. Defining and using: :root { --primary: #6366f1; --text: #1a1410; --radius: 8px; --spacing: 16px; } .button { background: var(--primary); color: white; padding: var(--spacing); border-radius: var(--radius); } Why use CSS variables:… CSS variables obey the cascade - they can be scoped to any element: Global scope: :root { --color: #333; --bg: #fff; } Component scope: .card { --color: #6366f1; --bg: #eef2ff; color: var(--color); background: var(--bg); } Conditional scope with media queries: :root { --spacing: 8px; } @media (min-width: 768px) { :root { --spacing: 16px; } } @media (min-width: 1200px) { :root…