303 CSS custom properties [0.5d]

Sass variables disappear when the stylesheet is compiled. CSS custom properties stay in the browser: they follow the cascade, can be changed at runtime, and let one value drive a whole theme. This card teaches you when to reach for which, and how to turn scattered CSS values into a small set of named variables.

Important

Work on this lesson in teacher mode.

Learning goals

• You can explain what a CSS custom property is and how it differs from a Sass variable, in particular that it lives in the browser and follows the cascade.
• You can define custom properties on :root and on individual elements, and read them with var() including a fallback value.
• You can explain how scoping a custom property to a block or a state (e.g. a -dark modifier) changes everything below it.
• You can extract repeated values — colors, spacing, font sizes — into a small set of theme variables with meaningful names.
• You can decide when a value should be a Sass variable, a custom property, or neither.

Resources

Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.

Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.

• 📄 MDN: Using CSS custom properties Show archive.org snapshot — declaring, var() with fallbacks, inheritance and scoping
• 📄 CSS custom properties vs. Sass variables: a pragmatic guide Show archive.org snapshot — when to use which, and how to combine them
• 📄 Why we prefer CSS custom properties to Sass variables Show archive.org snapshot — theming and runtime changes as the deciding argument
• ▶️ Arne's internal talk on CSS custom properties — slides and notes, video in our library

Exercises

Theme variables for MovieDB

Go through your MovieDB stylesheets and find values that repeat or that belong together: colors, spacing steps, font sizes, border radii.

Do one of the following, or both if you have time:

• Extract inline CSS values into global theme variables defined as custom properties on :root, and use them everywhere.
• Convert existing Sass variables into custom properties, and note what becomes possible now that they exist at runtime.

Finish by changing one theme variable and checking that the whole app follows.