Capítulo 44

Variáveis CSS

5 min de leitura 969 palavras 2 gravuras

Este capítulo concentra as cores e os espaços da Oficina Costeira em variáveis. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Este volume tem 52 capítulos. Esta é a 44.

O exemplo está em exemplos/44-variaveis-css/. O arquivo main.css já tem um bloco :root. Agora você entende por que ele existe e como var() puxa o valor. Ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

Declarar propriedades personalizadas com dois hífens.
Centralizar tokens em :root.
Usar var() com um valor de reserva.
Trocar o tema mudando poucos nomes, não cem regras.
Entender que a variável ainda obedece à cascata.
Manter contraste e foco visível depois da troca de cor.

Um nome no lugar de um número

Cor de marca repetida dez vezes é armadilha. Você acha um #0b4f6c, esquece o outro, e o cabeçalho fica de uma cor e o link de outra.

Propriedade personalizada (variável CSS) guarda o valor num nome. O nome começa com dois hífens.

:root {
  --marca: #0b4f6c;
  --areia: #f7f4ee;
  --tinta: #14222b;
  --acao: #c45c26;
}

body {
  color: var(--tinta);
  background: var(--areia);
}

a {
  color: var(--marca);
}

:root é o elemento raiz do documento, o html. O que você declara ali vale para a página inteira, salvo se um bloco mais específico redefinir.

Mude só --marca para #0a3d52. Preveja cabeçalho e links mais escuros juntos. Recarregue. Confira. Um lugar só. Várias regras acompanham.

Erro comum: escrever --marca: #0b4f6c e depois continuar colando #0b4f6c nas regras. Se a regra não chama var(--marca), a variável não participa.

O que cabe numa variável

Cabe cor, tamanho, fonte, vão, até um valor de grid-template-columns. O nome deve dizer o papel: --marca, --tinta, --vao, não --cor1.

:root {
  --marca: #0b4f6c;
  --areia: #f7f4ee;
  --tinta: #14222b;
  --acao: #c45c26;
  --vao: 1rem;
  --fonte: "Segoe UI", Tahoma, sans-serif;
  --foco: 3px;
}

body {
  font-family: var(--fonte);
}

.cards {
  display: grid;
  gap: var(--vao);
}

a:focus-visible,
button:focus-visible {
  outline: var(--foco) solid var(--acao);
  outline-offset: var(--foco);
}

O foco visível de cerca de 3 px continua obrigatório. Guardar 3px em --foco não é desculpa para apagar o contorno. É jeito de repetir o mesmo contorno em link, botão e campo.

Mude só --vao para 2rem. Preveja cards mais afastados. Recarregue. Confira a home. O HTML não muda.

Erro comum: --grande: 18px no tipo. Você volta a travar a escala em pixel. Tamanho de letra deste volume permanece em rem.

Reserva: se a variável faltar

var() aceita um segundo valor. Se --marca não existir, o navegador usa a reserva.

.site-header {
  background: var(--marca, #0b4f6c);
  color: #fff;
}

.site-header a {
  color: #fff;
}

A reserva não substitui declarar :root. Ela salva uma regra isolada quando o nome está errado. Prefira acertar o nome.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <header class="site-header">
      <p><a href="index.html">Oficina Costeira</a></p>
    </header>
    <main>
      <h1>Oficina Costeira</h1>
      <p>Coletivo fictício de design em João Pessoa.</p>
    </main>
  </body>
</html>

Mude só a chamada para var(--marcaa). Preveja: o cabeçalho pode cair na reserva ou no fundo padrão, dependendo da regra. Recarregue. Confira. Corrija o nome. Erro de digitação em variável é silencioso: a propriedade some.

Erro comum: achar que a variável “quebra o site” com uma mensagem vermelha. Em CSS o valor inválido é ignorado e a cascata segue.

Resumo dos conceitos: --cor-marca, var(), tema

Cascata: o filho pode redefinir

Variável não é constante de programa. Ela obedece à cascata e à herança. Um módulo pode ter paleta própria sem copiar o arquivo.

.card-destaque {
  --tinta: #fff;
  --areia: #0b4f6c;
  color: var(--tinta);
  background: var(--areia);
}

Dentro de .card-destaque, --tinta é branco. Fora, continua o valor do :root. Útil num cartão invertido. Perigoso se você redefinir --marca no body e o menu herdar sem querer.

Não crie um :root por página. Um arquivo main.css, um bloco de tokens, exceções só no módulo que realmente inverte.

Mude só .card para redefinir --areia: #fff (já é o fundo do card). Preveja pouca diferença. Recarregue. Confira. Depois tente --tinta: #c45c26 só no card. O texto do card fica na cor de ação. O resto da página não.

Erro comum: redefinir variáveis no seletor * . Tudo herda a exceção e você perde o mapa.

Trocar tema sem reescrever o site

Com tokens, um tema noturno vira outro conjunto no mesmo :root ou numa classe no html.

html[data-tema="noite"] {
  --marca: #7ec8e3;
  --areia: #14222b;
  --tinta: #f7f4ee;
  --acao: #e08b5b;
}

<html lang="pt-BR" data-tema="noite">

Ainda assim o contraste precisa valer. Fundo escuro com --tinta claro. Link --marca visível no cabeçalho e no miolo. Teste o contorno de foco: laranja em fundo escuro continua visível?

Este volume não pede seletor de tema em JavaScript. Você troca o atributo na mão, recarrega e confere. Depois devolva o tema claro da Oficina Costeira.

Mude só --acao no tema noite para #555. Preveja foco fraco. Recarregue. Percorra com Tab. Confira. Se o contorno sumir, a variável “bonita” falhou no teste de acessibilidade. Recoloque uma cor forte.

Erro comum: tema escuro só no body e o header preso no azul claro original, porque o cabeçalho usa cor crua em vez de var(--marca).

Tokens da Oficina Costeira

Abra exemplos/44-variaveis-css/assets/stylesheets/main.css. O bloco :root já lista --marca, --areia, --tinta e --acao. O body já chama var(). Complete o hábito: cabeçalho, botão e foco também.

Não espalhe um segundo arquivo theme.css se o site ainda cabe num main.css. Comentário acima do :root já documenta.

Não publique. Não ligue o servidor em 0.0.0.0.

python -m http.server 8769 --bind 127.0.0.1 --directory curso

Visite http://127.0.0.1:8769/exemplos/44-variaveis-css/. Encerre com Ctrl+C.

Pré-processadores (Sass e afins) também têm variável. Isso fica para o encerramento do volume, só como ideia. Aqui a variável é nativa do CSS.

Resumo dos conceitos: tema, var(), --cor-marca

Atividades

Por que o nome da variável começa com dois hífens?
O que :root representa neste volume?
Escreva uma regra de fundo que use --areia com reserva #f7f4ee.
Se .card redefine --tinta, o parágrafo fora do card muda?
Trocar --acao para um cinza médio é aceitável? Por quê?

Respostas comentadas

É a sintaxe da propriedade personalizada em CSS. Sem os dois hífens o navegador não trata o nome como variável.
A raiz do documento (html). Tokens globais da Oficina Costeira ficam ali.
background: var(--areia, #f7f4ee);
Não. A redefinição vale dentro do card. Fora, vale o :root.
Não. --acao pinta o foco. Cinza médio some no fundo areia. Contraste e contorno de 3 px vêm antes da estética.

Referências

O arquivo completo

Referência do exemplo 44-variaveis-css, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}