Acredito que a maioria das pessoas não gostam de matemática, apesar de que, na área de desenvolvimento, ela acaba sendo utilizada em quase tudo que se é feito.

Como front-end developer, utilizo muita matemática com javascript, e quando precisava realizar cálculos no css, acabava usando também javascript, até que eu conheci a função Calc do css.

Essa função ja existia para aqueles que usavam pré-processadores, mas a maior diferença de se usar a função nativa é que nela podemos misturar as unidades de medida, como pixels e porcentagem, para realizar os cálculos.

Então, podemos a partir de agora, utilizar operações matemáticas(adição, subtração, multiplicação e divisão) também no CSS.

Mas a pergunta que você provavelmente está se fazendo é, onde utilizo isso ? Bom vamos a alguns exemplos.

Vamos dizer que temos o seguinte card:

Agora, vamos dizer que o elemento pai se torne tão pequeno que não suporte todo o conteúdo. Então, para uma melhor navegabilidade, queremos inserir um scroll, porém somente o conteúdo deve ter o scroll, como somos ninjas no css, vamos colocar um overflow-y: auto, certo ? Mais ou menos, porque o overflow-y é usado somente quando o próprio conteúdo do elemento tem uma altura definida que pode ser sobreposta. Não seria viável fazer com que o conteúdo do elemento tivesse 100% de altura pois com o header que já existe, ficaria um valor muito grande, então necessitaríamos de 100% menos a altura do header. E então ficaria assim:

Link para o codepen

O exemplo acima é um caso simples, de como podemos utilizar o calc no desenvolvimento do dia-a-dia.

Quando necessitamos utilizar um grid system em nosso projeto, a maioria dos desenvolvedores front-end já correm para o bootstrap, por ser muito mais fácil e simples, mas e se eu lhe disser que isso pode ser feito com a função calc em poucas linhas. Vamos dizer que precisamos de uma linha com 7 colunas, apenas temos que dividir o 100% da tela por 7, ou seja calc(100% / 7), segue o exemplo:

Link para o codepen

Suporte

Segundo o can i use os navegadores que dão suporte a função calc são: IE 11+, Edge 13+, Chrome 29+, Firefox 47+, Safari 9.1+ e Opera 39+. Mas caso necessite usar no bom e velho IE 8 ou 9, temos um polyfill muito bem feito pela comunidade que vai funcionar nos browser mais antigos.

Conclusão

A função calc é uma mão na roda para quando é necessário trabalhar com precisão no css pelo fato de podermos usar operações matemáticas, ela pode ajudar muito para quando temos que desenvolver sites responsivos.

E você, já usou a função calc ? Deixe nos comentários caso tenha resolvido algum problema com ela.