Custom properties in CSS

Variables that cascade, take fallbacks, and can be set per component.

:root {
  --accent: #7c5cff;
  --radius: 0.5rem;
  --pad: 1rem;
}

.button {
  background: var(--accent);
  border-radius: var(--radius);
  padding: var(--pad) calc(var(--pad) * 1.5);
}

.button.danger {
  --accent: #e5484d;
}

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

How it works

1. A custom property starts with two hyphens.
2. var(--name, fallback) covers the unset case.
3. Redefining one on a child re-themes that subtree only.

Keywords and builtins used here

• background
• button
• calc
• card
• danger
• padding
• rem
• var

The run, in numbers

Lines

19

Characters to type

273

Tokens

78

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 55 seconds.

Type this snippet

Step 1 of 3 in Custom properties, step 5 of 21 in Responsive & modern CSS.

← Previous Next →