CSS Variables & Mini Project
CSS variables (custom properties) let you store values and reuse them everywhere. Define them on :root and use them with var(). Changing one variable instantly updates everything that uses it — great for themes! Let's put everything together and style a mini landing page.
Appy Says…
Imagine needing to change your brand colour across 50 CSS files. Before CSS variables, that meant 50 find-and-replace operations. With CSS custom properties, you change one line and every element updates instantly.
What are CSS Variables?
CSS Custom Properties (aka CSS variables) let you define reusable values in CSS. Define once, reference everywhere, change in one place.
- •Define:
:root { --primary: #1a73e8; --spacing-md: 16px; } - •Use:
color: var(--primary); - •Fallback:
color: var(--primary, blue); - •Scope: variables cascade — child can redefine
--primarylocally - •Dynamic: JavaScript can read/write:
el.style.setProperty('--primary', '#ff0000') - •Theming: swap entire colour palettes by toggling a class on
<html>
Think of it like a Minecraft resource pack colour palette
A Minecraft resource pack defines a set of colours used throughout the pack. CSS variables are your colour palette — change the palette definition and everything using those colours updates automatically.
How It Works
- •1. Declare in
:rootfor global scope::root { --brand: #e03; --space: 8px; } - •2. Reference anywhere:
background: var(--brand); - •3. Override locally:
.dark-section { --brand: #fff; } - •4. Computed values:
--size-lg: calc(var(--size-base) * 1.5); - •5. Dark mode:
@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #fff; } } - •6. JS theme switching:
document.documentElement.style.setProperty('--bg', '#000')
Real-World Examples
- •Spotify's dark/light mode toggle changes 10 CSS variables defined on :root
- •Tailwind CSS under the hood generates CSS custom properties for its design tokens
- •A button component uses
--btn-bg: var(--primary);— easy to override per context - •Animation timing:
--duration: 0.3s;used in 20 transitions — change once to speed up whole UI
Key Facts
- •CSS variables are live — JavaScript can change them at runtime and the UI updates instantly
- •Unlike Sass variables, CSS custom properties cascade and can be overridden at any scope level
- •CSS variables work in
calc():calc(var(--spacing) * 2) - •They're supported in 97%+ of browsers — completely safe to use
Watch Out!
CSS variables inherit through the DOM. If you define --color: red on a parent, all children see red unless they override it. This is powerful but can cause unexpected inherited values in deeply nested components.
Remember
Define design tokens in :root { }. Reference with var(--name). Use for colours, spacing, font sizes, border-radius — anything that might change or be reused.
What You Learned
- •CSS variables: define in :root with --name, use with var(--name)
- •Cascade through DOM, overridable locally, readable/writable via JavaScript
- •Unlocks: design tokens, dark mode theming, maintainable stylesheets at any scale
Key Facts
- →CSS variables are live — JavaScript can change them at runtime and the UI updates instantly
- →Unlike Sass variables, CSS custom properties cascade and can be overridden at any scope level
- →CSS variables work in
calc():calc(var(--spacing) * 2) - →They're supported in 97%+ of browsers — completely safe to use
Real-World Examples
Remember
Define design tokens in :root { }. Reference with var(--name). Use for colours, spacing, font sizes, border-radius — anything that might change or be reused.
Quick Quiz
How do you define a CSS variable?