O que são CSS custom properties (variáveis)?

Question

Accepted Answer

**CSS custom properties** (variáveis) permitem armazenar valores uma vez e reutilizá-los. Ao contrário das variáveis de preprocessador (Sass), elas são **ativas em tempo de execução** — cascateiam, herdam e podem ser alteradas com JavaScript ou media queries.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Fallback values

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Elas cascateiam e podem ser com escopo/sobrescritas

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Porque herdam, uma variável definida em um pai está disponível para todos os descendentes e pode ser sobrescrita em uma subárvore — algo que variáveis Sass (que são compiladas) não podem fazer.

## O killer feature: runtime theming

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Mude um tema inteiro redefinindo um punhado de variáveis — sem regras duplicadas. Você também pode fazer isso em JS:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Isso atualiza instantaneamente cada elemento usando essa variável — impossível com variáveis Sass compiladas.

## Por que isso importa

Variáveis CSS são a base da **composição de temas e design tokens** moderno: defina cores/espaçamento uma vez, reutilize em todos os lugares e alterne temas (modo escuro, variantes de marca) em tempo de execução via media queries ou JavaScript.

Elas trazem valores DRY e dinâmicos para CSS simples — nenhuma etapa de construção necessária.