Stop 03 · CSS3Topics · 12/17

Variables

In short

Your brand pink appears 40 times in the CSS. The client wants it a bit darker. With CSS variables, that's a one-line change instead of a find-and-replace nightmare.

CSS custom properties (`--main-color: #7E39FE;`) let you define reusable values and update them dynamically, including via JavaScript or media queries. In modern JavaScript, `const` and `let` are usually preferred because block scoping makes variable lifetime easier to reason about and reduces accidental reassignment.

The jaadu mascot in a paint shop holds a pink swatch while a mixing machine fills a bucket with matching paint.

Think of it like this

The paint shop's colour code

When you repaint your room, you don't describe the shade every time. You tell the shop 'code 7342' and they mix it. CSS variables are those codes: define --brand once, use var(--brand) everywhere, change it in one place.

Watch it happen

How a variable flows down the page

:root --brand

body

header

.btn

main

.btn.ghost

1/4:root sets --brand: #ec4899. Every element on the page inherits it.

The big ideas

What you need to know

Define with --

Custom properties start with two dashes, like --brand: #ec4899. You read them with var(--brand).

They inherit

Define them on :root for the whole site, or on one component to change values just inside it.

Themes become easy

Swap the variable values for dark mode, and every element using them updates instantly.

Live in the browser

Unlike Sass variables, CSS variables exist at runtime. JavaScript can read and change them.

See it in code

Walk through the code

css

1:root {2  --brand: #ec4899;3  --text: #1f2937;4  --bg: #ffffff;5  --radius: 12px;6}7 8@media (prefers-color-scheme: dark) {9  :root { --text: #f3f4f6; --bg: #111827; }10}11body { color: var(--text); background: var(--bg); }12.btn {13  background: var(--brand);14  border-radius: var(--radius);15}16.btn.ghost { --brand: transparent; }   /* local override */

1/4Define your design tokens once on :root.

Dark mode is just new values for the same variables. The .ghost button changes --brand only inside itself.

Save yourself the pain

Common mistakes

Oops

Naming variables by colour, like --pink.

Do this instead

Name them by job, like --brand or --danger. Then a colour change doesn't make the name wrong.

Oops

Forgetting a fallback when a variable might be missing.

Do this instead

Use var(--gap, 1rem) so there's a default value.

Your mission

Add a theme switcher

~25 min

Quick check

What's one thing CSS variables can do that Sass variables can't?

Go deeper

1Refactor a stylesheet's hardcoded colors into `:root` custom properties. Validate your understanding by applying it in a small practical example.
2Use variables to build a simple light/dark theme toggle. Verify the behavior with realistic data and handle the failure or empty state as well.
3Learn variable scoping — they cascade and can be overridden per component.