CSS Variables

The var() Function

CSS variables (custom properties) store values you can reuse across your stylesheet. They are defined with names that start with -- and accessed using the var() function.

Define variables (often on :root):

:root {
  --primary: #2563eb;
  --radius: 12px;
  --space: 14px;
}

Use variables with var():

.card {
  border-radius: var(--radius);
  padding: var(--space);
  border: 1px solid rgba(0,0,0,.14);
}

.button {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
}

Fallback value: If a variable is not defined, you can provide a fallback.

.box {
  background: var(--brand, #0ea5e9);
}

Tip: Variables are resolved at runtime, which makes them ideal for themes and dynamic UI changes.

Overriding Variables

CSS variables follow the cascade. A variable defined on a child element overrides the same variable defined on a parent.

Override inside a container (theme section):

:root {
  --primary: #2563eb;
  --bg: #ffffff;
  --text: #111111;
}

.theme-dark {
  --primary: #22c55e;
  --bg: #0b1220;
  --text: #e5e7eb;
}

.page {
  background: var(--bg);
  color: var(--text);
}

.page .link {
  color: var(--primary);
}

Override per component:

.badge {
  --primary: #a855f7;
  background: var(--primary);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
}

Tip: This is a powerful pattern: component-level variables allow reusable components with customizable styles.

Variables and JavaScript

CSS variables can be read and updated using JavaScript, which makes them perfect for theme toggles and dynamic UI controls.

Read a variable:

const rootStyles = getComputedStyle(document.documentElement);
const primary = rootStyles.getPropertyValue("--primary").trim();

Update a variable:

document.documentElement.style.setProperty("--primary", "#ef4444");

Example use case: user selects an accent color and the entire UI updates without rewriting CSS classes.

Variables in MQ

You can change variables inside media queries to adapt spacing, typography, or layout values across breakpoints.

Responsive spacing and radius:

:root {
  --space: 14px;
  --radius: 12px;
}

@media (min-width: 992px) {
  :root {
    --space: 18px;
    --radius: 16px;
  }
}

.card {
  padding: var(--space);
  border-radius: var(--radius);
}

Reduced motion (variables + animation duration):

:root { --anim: 200ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --anim: 0ms; }
}

.button {
  transition: transform var(--anim) ease;
}

Summary

• Define custom properties with --name and read them using var(--name).
• Variables can be overridden through the cascade (scoped themes and components).
• JavaScript can read/update variables with getComputedStyle and setProperty.
• Media queries can update variables to create responsive design systems.