CSS calc()

Função calc() no CSS

A função calc() no CSS permite realizar cálculos matemáticos para definir valores de propriedades CSS. Isso é útil quando você precisa combinar diferentes unidades ou ajustar tamanhos de elementos de forma dinâmica.

Exemplo de uso

Vamos ver um exemplo de como usar a função calc() para definir a largura de um elemento:

<style>
.box {
    width: calc(100% - 50px);
    height: 200px;
    margin: auto;
    background-color: lightblue;
}
</style>

Note que sempre há espaço entre os operadores e o número!

Exemplo de código no body:

<div style="background-color: lime;">
<div class="box">Conteúdo da caixa</div>
</div>

Exemplo de funcionamento:

Conteúdo da caixa

No exemplo acima, a largura da caixa é calculada como 100% da largura do elemento pai menos 50 pixels.

Operadores suportados

  • Adição (+): calc(50% + 20px)
  • Subtração (-): calc(100% - 50px)
  • Multiplicação (*): calc(10px * 2)
  • Divisão (/): calc(100px / 2)

Note que a multiplicação e a divisão só podem ser usadas com números, não com unidades diferentes.

Sintaxe

A função calc() no CSS deve ser usada com cuidado para evitar erros de sintaxe. Aqui estão algumas regras importantes a serem seguidas:

  • Espaços ao redor dos operadores: Sempre deve haver um espaço antes e depois dos operadores matemáticos (+, -, *, /). Por exemplo, calc(100% - 50px) é correto, enquanto calc(100%-50px) é incorreto.
  • Unidades consistentes: Certifique-se de que as unidades usadas nos cálculos sejam compatíveis. Por exemplo, você pode combinar porcentagens com pixels, mas não pode combinar pixels com em sem o uso correto de parênteses. Pois lembre-se de que "em" é uma unidade relativa ao tamanho da fonte do elemento pai.
  • Uso de parênteses: Use parênteses para agrupar expressões complexas e garantir que os cálculos sejam realizados na ordem correta. Por exemplo, calc((100% - 50px) / 2).

Principais erros:

  • Esquecer de adicionar espaços ao redor dos operadores.
  • Combinar unidades incompatíveis.
  • Adicionar um espaço entre a palavra calc e o parêntese de abertura (.
  • Não fechar corretamente a função calc() com parênteses.

Variáveis em CSS

Variáveis em CSS, também conhecidas como custom properties, permitem que você armazene valores que podem ser reutilizados em todo o seu código CSS. Elas são definidas usando a sintaxe --nome-da-variavel: valor; e podem ser acessadas usando a função.

Como definir variáveis em CSS

Para definir uma variável em CSS, você pode adicioná-la dentro de um seletor. Normalmente, as variáveis são definidas no seletor :root para que estejam disponíveis globalmente:

:root {
--cor-principal: #3498db;
--margem-padrao: 16px;
}

Como usar variáveis em CSS

Para usar uma variável em CSS, você utiliza a função var() passando o nome da variável:

body {
color: var(--cor-principal);
margin: var(--margem-padrao);
}

Vantagens de usar variáveis em CSS