Funções CSS

No Laboratório Belavista, a largura do cartaz precisa caber na vitrine sem estourar. Funções CSS calculam, limitam e reutilizam valores sem JavaScript.

O exemplo está em pacote de exemplos/44-funcoes-css/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• O que é uma função CSS (nome + argumentos).
• Usar var(), calc(), min(), max() e clamp().
• Lembrar seletores funcionais como :is() e :not().
• Aninhar funções com cuidado.

Função = tarefa nomeada

Uma função CSS recebe argumentos e devolve um valor (ou filtra seletores). Você não inventa funções novas; usa as do idioma.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Funções — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <article class="cartaz">
      <h1>Oficina de tipografia</h1>
      <p>Sábado, 10h · Ateliê Belavista</p>
    </article>
  </body>
</html>

:root {
  --tinta: #c45c26;
  --pad: 1rem;
}
.cartaz {
  --largura: clamp(16rem, 80vw, 36rem);
  width: var(--largura);
  margin-inline: auto;
  padding: calc(var(--pad) * 1.5);
  background: color-mix(in srgb, var(--tinta) 15%, white);
  border-inline-start: 0.5rem solid var(--tinta);
}
.cartaz :is(h1, p) {
  margin-block: 0.5rem;
}

Mude uma coisa. Em clamp, troque 36rem por 20rem. Preveja o cartaz mais estreito no desktop. Recarregue. Confira.

var, calc e limites

• var(--nome, reserva) lê a custom property; a reserva entra se a variável faltar.
• calc() soma e subtrai unidades diferentes (100% - 2rem).
• min() / max() escolhem o menor ou o maior valor.
• clamp(mín, preferido, máx) combina os três — típico em tipografia fluida e larguras.

.titulo {
  font-size: clamp(1.25rem, 2vw + 1rem, 2.5rem);
  padding-inline: max(1rem, 4vw);
}

Outras famílias (visão)

Você já viu rgb(), hsl(), minmax() no Grid, fit-content(). Mais adiante: formas (circle()), gradientes, filtros. O padrão é o mesmo: nome, parênteses, argumentos.

Erro comum: escrever calc(100% - 2 rem) com espaço entre número e unidade inválido, ou esquecer o espaço em torno de + e - em calc().

Nesting de funções

Dá para combinar: min(100%, max(12rem, 40vw)) ou calc(var(--pad) * 2 + 1rem). Leia de dentro para fora. Se a expressão ficar ilegível, quebre em custom properties nomeadas (--pad-duplo, --largura-cartaz).

No Belavista, funções evitam números mágicos espalhados: uma variável muda a vitrine inteira.

Arquivo no disco. Página no navegador. Teste em 127.0.0.1.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. O que clamp(16rem, 80vw, 36rem) garante?
2. Para que serve o segundo argumento de var(--tinta, #c45c26)?
3. :is(h1, p) aplica a regra a quais elementos dentro de .cartaz?

Respostas comentadas

1. A largura não fica menor que 16rem nem maior que 36rem; entre esses limites, acompanha 80vw.
2. É o valor de reserva se --tinta não estiver definida na cascata.
3. Aos h1 e p que forem descendentes de .cartaz.