Variável CSS

Um valor guardado com nome, reutilizado em todo lugar. É o token do design system, no código.

Também aparece como "custom property", "var()", "token", "design token", "--cor-primaria".

No mundo do Design

O Figma chama isso de Variables

Variável CSS é literalmente a variable do Figma. Você define um valor uma vez, dá um nome e usa esse nome em vez do valor cru.

:root {
  --cor-acento: #1d6fd4;
  --espaco-m: 16px;
  --raio: 12px;
}
 
.botao {
  background: var(--cor-acento);
  padding: var(--espaco-m);
  border-radius: var(--raio);
}

:root é o elemento mais externo da página, então tudo enxerga essas variáveis. É onde mora a camada de tokens globais.

Por que isso importa pra quem desenha

Quando o time troca o azul da marca, é uma linha. Quando você recebe um design system em Figma com variables organizadas, ele já está praticamente no formato que o dev vai escrever. Nome de token bem escolhido no Figma vira nome de variável bom no código, e nome ruim viaja junto.

Tema escuro sai quase de graça

:root {
  --fundo: #ffffff;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1b1e23;
  }
}

Nenhum componente muda. Só o valor por trás do nome.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.