Carregando...

Calc e funções matemáticas CSS

As propriedades personalizadas deram nomes aos valores. As funções matemáticas calculam na renderização: subtraia a sidebar de 100%, limite com min(), tipografia fluida com clamp() — sem build Sass.

`calc()` — aritmética no valor

Expressão dentro de calc(...). Soma e subtração exigem espaços em torno do operador:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

Misture %, rem, px, vw e var() quando o resultado for válido.

Espaços e regras de unidades

Inválido: calc(100%-2rem). Válido: calc(100% - 2rem). Em *, um fator deve ser número.

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

`min()` e `max()`

min() escolhe o menor; max() o maior:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — valores fluidos limitados

Ordem: mínimo, preferido, máximo.

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

As funções resolvem na hora do valor computado — combinam com tokens em :root e seguem a cascata como qualquer outro comprimento.

Qual função quando?

📊 Funções matemáticas

Função	Ideia	Uso
calc()	fórmula para uma propriedade	subtrair gutters, dobrar token
min()	«não maior que…»	teto de largura
max()	«pelo menos…»	piso
clamp()	min + preferido + max	tipografia fluida

Padrão simples de altura

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

Experimente

Duas colunas com calc no main.
Troque font-size fixo por clamp.
min(100%, 40rem) num wrapper.
Token :root para fórmula repetida.
Espaços em calc(100%-1rem).

Erros comuns

Sem espaços em calc(100%-2rem)
clamp com min > max
max() quando queria teto (min())
calc no nome da propriedade
dividir duas longitudes

Resumo

calc() — espaços em + / -
min() / max() — extremos da lista
clamp() — tipografia fluida
Com var(--tokens)
Próximo: aninhamento CSS

🧠 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