Funções Modernas: clamp(), min(), max() e calc()

CSS tem funções matemáticas que rodam no momento da renderização. Você não precisa de pré-processador (Sass/Less) ou JavaScript para fazer contas - o navegador resolve.

calc(): aritmética no CSS

.caixa {
  width: calc(100% - 40px);     /* 100% menos 40px de padding total */
  height: calc(100vh - 60px);   /* altura da tela menos header */
  padding: calc(1rem + 2px);
}

Você pode misturar unidades: 100% - 40px é totalmente válido (e resolve pra "a largura do pai, menos 40px"). Operadores: +, -, *, /. Respeita ordem de operações (parênteses primeiro).

calc() resolve dinamicamente - se a largura do pai muda, o cálculo é refeito. É poderoso para layouts responsivos onde "100% - sidebar" é mais útil que "calc(100% - 240px)" (que fica errado se a sidebar muda de tamanho).

min() e max(): o menor/maior de uma lista

.caixa {
  width: min(90%, 800px);   /* 90% do pai OU 800px, o que for MENOR */
  font-size: max(16px, 1rem); /* 16px OU 1rem, o que for MAIOR */
}

São "vencidouros": escolhem o menor (ou maior) valor entre os argumentos. Perfeitos para limitadores responsivos.

min(90%, 800px) lê: "use 90% do pai, mas nunca passe de 800px". Em telas pequenas: 90% do pai. Em telas grandes: trava em 800px. Sem media query.

max(16px, 1rem) lê: "use 16px OU 1rem, o que for maior". Útil para garantir um piso: "essa fonte nunca fica menor que 16px, mesmo se o usuário diminuir a preferência do sistema".

clamp(): o melhor dos dois mundos

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /*         mínimo   ideal  máximo */
}

clamp(min, ideal, max) aceita três valores: o mínimo, o ideal (escalável), e o máximo. O navegador:

• Nunca fica abaixo do mínimo (acessibilidade - respeita o usuário que aumentou o zoom)
• Nunca passa do máximo (design - não destrói o layout em monitores 4K)
• Escala suavemente entre eles conforme a tela muda

É a função mais importante de tipografia responsiva. O 4vw é "4% da largura da tela" - em uma tela de 1000px, são 40px. Em uma tela de 400px, são 16px. O navegador interpola automaticamente.

Exemplos clássicos:

/* Tipografia fluida */
h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); }
p  { font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem); }

/* Espaçamento fluido */
.secao { padding: clamp(2rem, 5vw, 5rem); }

/* Container inteligente */
.container {
  width: clamp(320px, 90%, 1200px);
  margin-inline: auto;  /* centraliza */
}

clamp() virou a resposta padrão para "como faço tipografia fluida sem media query". Toda regra de font-size em produção hoje em dia é clamp(min, ideal, max).

Combinando clamp com calc

h1 {
  /* Cresce com a tela, soma 1rem constante, fica entre 1.5rem e 3rem */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

1rem + 2vw é uma expressão calc válida dentro do clamp. Você pode fazer contas mais complexas mantendo o piso e o teto.

minmax() (Grid)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /*                                mínimo   máximo  */
}

A gente viu no Grid: minmax(min, max) define o range de tamanho que uma coluna/linha pode ter. É a base da galeria responsiva automática.

Outras funções úteis

.elemento {
  /* Cor com canal alpha controlado por variável */
  background: rgb(from var(--cor) r g b / 0.5);
  /* "Pega a cor da variável e aplica 50% de alpha" - suporte recente */

  /* Arredondamento */
  border-radius: max(8px, 1vmin);

  /* Rem para pixel */
  font-size: round(up, 1.5rem, 1px); /* arredonda pra cima a cada 1px */
}

A função color-mix() (suporte recente) é particularmente útil:

.botao:hover {
  background: color-mix(in srgb, var(--cor-primaria) 80%, black);
  /* mistura 80% da cor primária com 20% de preto */
}

Faz o que o SCSS fazia com darken() - mas em CSS puro.

O que fazer com unidades personalizadas

Você pode declarar unidades próprias via @property (visto no nó de variáveis):

@property --tamanho {
  syntax: "<length>";
  initial-value: 16px;
  inherits: true;
}

.caixa {
  --tamanho: clamp(16px, 2vw, 24px);
  padding: var(--tamanho);
  font-size: var(--tamanho);
}

Combinado com clamp() e @property, dá pra fazer tokens de design system que calculam sozinhos o valor.

• calc(a + b): aritmética pura. Mistura unidades.
• min(a, b, c): o menor.
• max(a, b, c): o maior.
• clamp(min, ideal, max): o mais importante. Use para tipografia e espaçamentos fluidos.
• minmax(min, max): exclusivo do Grid.
• color-mix(): mistura cores (substitui darken/lighten).

Dica: a fórmula "mágica" de tipografia fluida é clamp(min, FAVORITO + ESCALA_VW, max). Ajuste o FAVORITO até ficar bom em telas médias, e a escala_vw (geralmente 0.5 a 2) para o quanto a fonte cresce em telas grandes. A maioria dos sites usa valores entre 1rem + 0.5vw e 2rem + 3vw.

No próximo nó, vamos ver Container Queries - uma das maiores evoluções do CSS moderno: @container que responde ao pai, não à tela.