Com a função calc(), você pode realizar cálculos diretamente dentro das suas folhas de estilo para determinar valores de propriedades dinamicamente. Isso significa que você pode criar interfaces de usuário flexíveis e responsivas calculando dimensões com base no tamanho da viewport ou em outros elementos. calc() é uma função CSS. Você vai aprender mais sobre funções quando começar a aprender sobre JavaScript, mas nesta lição, você vai aprender o básico que precisa saber para entender como calc() funciona. Uma função é um bloco de código que executa uma tarefa específica. Algumas funções já estão definidas em CSS, então você pode usá-las diretamente e passar quaisquer valores necessários para elas personalizarem como suas tarefas serão executadas. No mundo da programação, quando executamos a tarefa realizada por uma função, dizemos que "chamamos" a função. Os valores que passamos para a função são conhecidos como argumentos. Como você pode ver no código abaixo, para chamar uma função, você escreve seu nome seguido pelos argumentos entre parênteses, separados por vírgulas. Não deve haver espaço entre o nome da função e o parêntese de abertura:

function(argument1, argument2, argument3)

Uma função pode precisar de apenas um valor para saber o que fazer. Nesse caso, ele aceitará apenas um argumento. É isso que acontece com a função calc(). Ele recebe um argumento porque precisa saber o que calcular. Para isso, você passa algo chamado expressão como argumento. Uma expressão é uma combinação de valores e operadores que produz um resultado. É assim que você pode chamar a função calc(). Você escreve o nome calc, seguido por parênteses, e dentro dos parênteses, você escreve a expressão:

calc(expression)

A expressão é avaliada para calcular o resultado final. "Avaliada" significa apenas que os valores e operadores são convertidos em um único valor nos bastidores. O resultado é atribuído à propriedade CSS onde o cálculo está sendo feito. Você pode realizar cálculos em valores que representam comprimento, ângulo, tempo, porcentagens, números e cores. Você também pode combinar diferentes unidades como pixels, porcentagens e ems. Com números, todos os valores na expressão, também chamados de operandos, devem ter suas unidades correspondentes, como px, em e porcentagem (%). Dependendo do operador, diferentes operandos podem ter unidades diferentes. Você pode usar os operadores de adição (+), subtração (-), multiplicação (*) e divisão (/) na expressão. Se houver múltiplos operandos e operadores, calc() seguirá a regra padrão de precedência de operadores. Você também pode adicionar parênteses para estabelecer a ordem das operações, se necessário. No exemplo abaixo, você pode ver um div com o texto Hello, World!. Usando o seletor de tipo CSS para selecionar o div, você pode estilizar com texto branco e fundo azul escuro:

<link rel="stylesheet" href="styles.css" />
<div>Hello, World!</div>

div {
  color: white;
  background-color: #1b1b32;
  width: calc(50% - 20px);
}

O que há de novo aqui é que a largura é calculada dinamicamente. Observe como estamos chamando a função calc() e passando uma expressão como argumento. A expressão tem dois operandos com unidades diferentes e um operador, o operador de subtração. Porcentagem é uma unidade relativa. O valor (50%) será determinado pela largura do contêiner pai. Então, 20px é subtraído do valor. O resultado desta expressão determinará a largura do div. A largura do div é aproximadamente metade da largura total do seu contêiner e, se você redimensionar o contêiner pai, a largura será recalculada automaticamente. Essa é a principal vantagem de usar calc(). Você pode determinar o valor de uma propriedade CSS dinamicamente com base em diferentes aspectos da aplicação ou da viewport. A expressão também pode conter funções e variáveis CSS se você precisar usá-las em seus cálculos. Você aprenderá mais sobre variáveis CSS nas próximas lições. Ótimo. Agora que você conhece o básico da função calc(), vamos abordar algumas de suas melhores práticas. Primeiro, você deve cercar os operadores de adição (+) e subtração (-) com espaços em branco. Por exemplo, a expressão abaixo não seria uma expressão válida porque o operador de subtração está imediatamente antes do segundo operando.

calc(100% -30px)

O operador de subtração (-) deve ser cercado por espaços em branco, assim. Adicionar o espaço em branco criará uma expressão válida.

calc(100% - 30px)

Isso não é necessário para os operadores de multiplicação e divisão mas é altamente recomendado. Você também pode aninhar chamadas da função calc() se precisar realizar cálculos e usar esses resultados em outros cálculos. Além disso, se você usar o valor zero para representar comprimento na expressão que você passa para a função calc(), você deve incluir as unidades. Por exemplo, esta expressão não seria válida:

calc(100% - 0)

Você precisaria adicionar as unidades, como px.

calc(100% - 0px)

Você também deve saber que atualmente, se você usar os operadores de multiplicação ou divisão, um dos operandos precisa ser sem unidade. Para o operador de divisão, especificamente o operando direito precisa ser sem unidade. Isto não seria uma expressão válida porque ambos os operandos têm unidades (pixels). Um dos operandos, seja 5 ou 50, deve ser sem unidade:

calc(5px * 50px)

Você precisaria omitir as unidades em um deles. Ambas as alternativas seriam válidas:

calc(5 * 50px)
calc(5px * 50)

E este é um exemplo com o operador de divisão. Isto não seria uma expressão válida já que ambos têm unidades:

calc(50% / 5%)

Você deve remover a unidade do operando direito quando você tiver o operador de divisão:

calc(50% / 5)

A função calc() pode ser muito útil para você como desenvolvedor web. Com esta função, você pode definir valores de propriedade dinamicamente para criar designs flexíveis e responsivos.