Carregando...

Variáveis CSS

Filtros mudavam pixels. Custom properties (variáveis CSS) melhoram a manutenção: um --brand em :root, botões leem var(--brand) — altere o token uma vez e a UI acompanha. Cascateiam e herdam; os nomes são seus.

Nomes seus: `--token`

Parece declaração normal, mas o nome começa com dois hífens:

Tokens globais em :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root é a raiz do documento — tokens do site. --names em qualquer seletor; descendentes herdam salvo override mais perto.

Ler com `var()`

Botão primário com tokens

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

Foco: tokens + var(). Nomes consistentes no projeto.

Fallback em `var()`

Fallback se faltar token

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

O segundo argumento é reserva; erro no nome em var() não corrige.

Escopo e overrides locais

📊 Onde colocar custom properties

Escopo	Seletor	Quando
Global	`:root`	Marca, espaçamento, raios
Componente	`.card`, `.alert`	Defaults de um padrão
Variante	`.card.is-warning`	Trocar poucos tokens
Runtime	`[data-theme="dark"]`	Nova paleta; mesmos `var()`

Override perto do elemento. :root afeta tudo; às vezes --accent local basta.

Accent local no card

Subárvore com accent próprio

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.is-featured só muda --accent; título e borda seguem via var().

Tema sem duplicar cada cor

Claro padrão, escuro com data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

body {
background: var(--surface);
color: var(--text);
}

JS pode alterar dataset.theme — tokens atualizam ao vivo.

Custom properties vs `$` Sass

Sass some no build; --tokens vivem na cascata do navegador.

Experimente

Cinco tokens em :root; botão só com var().
--accent + .is-featured.
Remova token + fallback.
[data-theme="dark"] no DevTools.
Troque #2563eb repetido por var(--brand).

Erros comuns

brand: sem --
var() como nome de propriedade
typo sem fallback

Resumo

--name; var(--name, fallback)
:root global; override local
Próximo: calc (Modern Toolkit)

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma