calc(): misturando unidades diferentes
Uma barra lateral fixa de 260px ao lado de um conteúdo que deveria ocupar 'o resto da tela' é um layout que nenhuma unidade sozinha, nem % nem px, consegue descrever.
Estudar esta lição interativa →calc() permite escrever uma conta matemática direto no valor de uma propriedade, e o grande poder dela é misturar unidades diferentes na mesma expressão, algo que nenhuma unidade sozinha consegue fazer. Uma barra lateral de largura fixa (260px) ao lado de um conteúdo que deveria ocupar "o resto da tela" é o exemplo clássico: o conteúdo precisa de calc(100% - 260px), porque nem % puro nem px puro descrevem "toda a largura, menos uma fatia fixa".
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. A barra lateral tem 260px fixos; o conteúdo principal usa calc(100% - 260px), ocupando o espaço restante (o padding e o flex-shrink mexem um pouco no tamanho final).
calc() também combina bem com variáveis CSS do início deste módulo: padding: calc(var(--espaco) * 2); dobra o valor de uma variável de espaçamento sem precisar declarar uma segunda variável só para isso. Os operadores aceitos são +, -, * e /, e é possível aninhar mais de uma conta na mesma expressão.
calc() exige um espaço em volta de + e -: calc(100% - 260px) funciona, mas calc(100%-260px) (sem espaço) é inválido, e o navegador ignora a propriedade inteira, sem aviso. Os operadores * e / não exigem esse espaço, mas mantê-lo por consistência não atrapalha em nada.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste .conteudo para calc(100% - 220px).