O que é calc () no CSS (e como usá -lo)

Algumas funções do CSS são poderosas, mas raramente usadas, não porque são difíceis, mas porque as alternativas mais fáceis estão disponíveis. Calc () é um deles. É super útil, mas muitas vezes ofuscado pelo Clamp ().

Calc () resolve alguns problemas de layout que o CLAMP () não pode tocar. É ótimo para alturas de seção de ajuste fino, ajustando para cabeçalhos pegajosos e misturando unidades flexíveis e fixas em uma linha de código. E aqui estão as boas notícias: você pode usar calc () sem escrever uma única linha de código.

No Divi 5, ele é construído diretamente na interface; portanto, digite seu valor e o Divi lida com o resto. Quer ver como? Neste post, você aprenderá como o calc () funciona, onde ajuda e como usá -lo no Divi 5.

O Divi 5 está pronto para ser usado em novos sites , mas espere um pouco antes de migrar os existentes.

O que é calc () no CSS?

Calc () é uma função CSS nativa que permite executar matemática simples, como adicionar, subtrair, multiplicar e dividir (com algumas limitações, dependendo do contexto) diretamente nas regras de seu estilo. É ótimo para ajustar tamanhos e espaçamento, especialmente ao misturar valores fixos e flexíveis para obter layouts mais suaves sem codificar tudo.

Vamos entender isso com um exemplo. Suponha que você queira que um elemento ocupe 80% da tela, mas ainda deixe espaço para estofamento. Você pode escrever:

width: calc(80% - 40px);

Isso diz ao navegador para calcular a largura dinamicamente, subtraindo 40 pixels de 80 % de seu contêiner. Quando combinados com técnicas de centralização, como margens automáticas, o espaço restante da subtração é distribuído uniformemente. O valor ajusta automaticamente com base no tamanho da tela.

À primeira vista, pode não parecer inovador. Mas Calc () é ideal para resolver problemas de layout diários, como espaçamento quebrado em telas pequenas, elementos sobrepostos sobre cabeçalhos fixos e seções fora do centro. Em vez de consultas de mídia longas, calc () em uma linha é suficiente. Aqui estão alguns casos de uso comuns de uma linha:

• preenchimento: calc (5VW + 20px); mantém o fluido de preenchimento. Mesmo em telas pequenas, nunca cai abaixo de 20 pixels.
• Altura: Calc (100VH - 80px); Mantém o conteúdo visível quando você tem um cabeçalho fixo. Ele ajusta automaticamente com base na altura da tela.
• Largura: Calc (60% - 1Rem); fornece controle flexível sobre a largura da seção, mantendo o espaçamento consistente. Você pode ajustar as margens circundantes usando valores como margem-esquerda: calc (40% + 0,5rem); para centralizar visualmente ou alinhar o elemento dentro de seu recipiente.

Em resumo, Calc () remove a necessidade de escrever CSS extra para cada ponto de interrupção. Em vez de reescrever estilos repetidamente, você pode criar lógica diretamente em seus valores e deixar o layout responder automaticamente. Você não está apenas definindo tamanhos, mas também decidindo como os elementos devem se comportar.

Entender como o calc () funciona

A sintaxe básica de Calc () se parece com o seguinte:

 calc(value operator value) 

Aqui, você pode usar qualquer comprimento ou unidade válido em valor, e o operador pode ser +, -, *ou /.

Por exemplo, se você deseja reduzir a largura de um elemento em 40 pixels, escreverá a largura: Calc (100% - 40px);. Observe o uso de %? É isso que torna a largura flexível.

Se usássemos calc (100px - 40px), o resultado sempre seria de 60 pixels, ou seja, estático. Mas, usando uma porcentagem, deixamos o navegador calcular o tamanho com base na tela ou no elemento pai. Ele se ajusta automaticamente à medida que o layout muda.

Dica rápida (e também uma regra comum): sempre adicione espaços entre valores e operadores para fazer com que o calc () funcione corretamente. Sem espaços, o CSS não funcionará. Abaixo, você verá a largura do contêiner sendo restaurada para padrão, pois a função calc () sem espaços não é mais válida:

Usando várias unidades

Você acabou de ver como o verdadeiro benefício do calc () ocorre quando você começa a combinar diferentes unidades relativas. Por exemplo, porcentagens com pixels ou larguras de viewport com REMS, porque é aí que o layout começa a responder com base no tamanho da tela muda.

Para tornar isso mais claro, aqui estão alguns combos úteis para tentar ver como eles funcionam em layouts reais.

Você também pode combinar vários valores e unidades em uma linha, o que torna os layouts responsivos de tamanho mais precisos. Este exemplo abaixo usa %, PX e REM para misturar escala de layout, espaçamento fixo e tipografia:

 width: calc(50% - 40px + 1rem); 

• Maldições de 50% com o contêiner
• 40px subtrai o espaço fixo como uma barra lateral
• 1Rem adiciona espaçamento com base no tamanho da fonte

Funções de calc () de ninho

Você também pode aninhar um calc () dentro de outro para criar uma lógica de layout mais complexa. É uma ótima maneira de refletir como você pensa sobre o design (camada por camada) com relacionamentos claros entre os valores. Por exemplo, largura: Calc (200px - Calc (100px + 2Rem));

Aqui, o navegador primeiro calcula 100px + 2Rem , que pode representar o preenchimento, as margens ou o tamanho de outro elemento. Em seguida, subtrai esse total de 200px para obter a largura final. A largura permanece relativa por causa do REM.

Esse tipo de ninho é útil quando seu layout depende de mais de um fator. Em vez de fazer as contas ou valores fixos de codificação, você pode escrever o relacionamento diretamente no CSS. Ele mantém seu design flexível e mais fácil de atualizar posteriormente.

Você não precisará de calc () aninhado com frequência, mas pode ajudar ao lidar com espaçamento em camadas ou elementos sobrepostos. Dito isto, você pode querer começar com cálculos simples primeiro, pois eles podem ficar esmagadores. Adicionar complexidade parecerá natural quando você se sentir confortável com a forma como funciona.

Por que usar calc () quando você tem Clamp ()?

Se você usar o CLAMP () com mais frequência, poderá ter essa pergunta. Para obter uma resposta clara, seria uma boa ideia entender a diferença entre os dois:

É fácil usá -lo para construir projetos de fluidos sem depender de consultas de mídia. Mas, embora o CLAMP () pareça mais inteligente, há muitas situações em que Calc () é mais relevante, como o seguinte:

• Subtraindo os valores fixos de layouts flexíveis: usando a altura: Calc (100VH - 80px) garante que uma seção preencha a tela menos a altura de um cabeçalho fixo, para que os elementos não se sobreponham. CLAMP () não pode fazer isso porque não suporta subtração.
• Elementos de deslocamento com precisão: um valor como margem-esquerda: calc (50%-200px); muda um elemento em relação ao seu recipiente, mantendo -o visualmente equilibrado. CLAMP () não pode executar esse tipo de posicionamento relacional.
• Alinhando seções lado a lado: ajuda a criar layouts responsivos de duas colunas onde uma coluna com largura: calc (60%-2REM); ocupa 60% do espaço menos uma lacuna consistente. CLAMP () é ideal para escalar um único valor, enquanto o calc () se destaca quando as relações entre vários valores são necessárias.

Em suma, o CLAMP () é ótimo ao definir como um único valor deve escalar entre tamanhos de tela. Mas calc () é o que você precisa quando seu layout depende de mais de uma coisa de uma só vez, como nos casos acima.

Combinando calc () + grampo ()

Enquanto Calc () e Clamp () são poderosos por conta própria, por que usar um quando você pode combinar os dois? Você pode aninhar calc () interface () para construir projetos de fluidos com lógica interna, como combinar escala flexível com controle preciso.

Por exemplo, preenchimento: grampo (1Rem, calc (2VW + 10px), 3Rem); Cria o espaçamento que escala entre 1Rem e 3Rem, mas o valor "preferido" é baseado em uma fórmula calc () que mistura a largura do viewport e um valor fixo.

Isso fornece controle responsivo, lógico e preciso sobre o seu design. Depois de aprender quando usar calc () e clamp () individualmente e quando combiná -los, você pode controlar completamente seu layout sem depender de pontos de interrupção personalizados

Usando variáveis ​​CSS com Calc ()

Você também pode estender a flexibilidade de Calc () com variáveis ​​CSS. Combine variáveis ​​com outras unidades, faça matemática sobre elas e crie a lógica do layout em torno dos valores reutilizáveis. Por exemplo, se você definir: root {–GAP: 40px;}, use o preenchimento: calc (var (–gap) + 1Rem); Ajuda você a definir o preenchimento responsivo com base nos seus valores raiz.

Nota: Ao usar variáveis ​​CSS dentro de calc (), envolva sua variável em torno de var (). Veja como eu fiz acima.

Isso permite criar um site completo usando um sistema de design consistente (suas variáveis ​​CSS) enquanto ainda tem controle preciso com Calc (). E se você deseja fazer alterações (globais), como ajustar o espaçamento no layout, poderá fazer isso alterando os valores raiz.

Não é tão fácil com o CLAMP (). Enquanto o CLAMP () suporta variáveis ​​CSS, cada valor deve resolver uma unidade completa e válida. O que quero dizer com isso?

Uma função como grampo (1Rem, var (–fluid-size), 3REM) funciona apenas se o tamanho do fluido resolver algo como 4VW. E se você precisar fazer matemática com uma variável, como adicionar ou subtrair, precisará envolver essa parte em calc (). Essas coisas menores tornam o calc () essencial ao criar valores dinâmicos com variáveis.

Calc () no divi 5

Tanto Calc () quanto CLAMP () são funções CSS avançadas que oferecem controle poderoso sobre layouts, espaçamento e capacidade de resposta, mas apenas se você estiver confortável escrevendo código. Isso limita seu uso a desenvolvedores ou profissionais da Web. Mas e aqueles que preferem fluxos de trabalho visuais e ainda desejam usar calc () e clamp () em seus projetos? Você pode fazer isso?

Sim, você pode. Dentro Divi 5, Calc () e Clamp () estão disponíveis como unidades avançadas e você não precisa escrever uma única linha de código para trabalhar com elas.

Inscreva -se no nosso canal do YouTube

Tudo o que você faz é entrar em calc () diretamente dentro de qualquer campo de entrada numérica, e é isso.

O Builder Divi age instantaneamente. Depois de inserir seu valor calc (), você obtém feedback ao vivo ao projetar. Não há necessidade de alternar entre o construtor, Devtools ou Previews, e não adivinhar como será.

O Divi 5 facilita a construção de projetos mais inteligentes e flexíveis sem tocar o código. Você pode até combinar calc () com as variáveis ​​de design da Divi ou suas próprias variáveis ​​CSS para criar layouts dinâmicos reutilizáveis. Vou mostrar como fazer isso na próxima seção.

A propósito, você sabia que o Divi 5 também suporta todas as funções do CSS em unidades avançadas? Você pode querer aprender sobre eles também

Aprenda tudo sobre as unidades avançadas do Divi 5

Como o divi 5 torna o uso de calc () sem esforço

Você acabou de ver que o Divi 5 faz com que o uso de calc () em seus designs, sem esforço, fornecendo visualizações instantâneas enquanto você trabalha. Mas há mais. O Divi fornece não apenas uma solução alternativa, mas uma maneira totalmente integrada e sem código de criar layouts responsivos e baseados em lógica usando as mesmas ferramentas que os desenvolvedores dependem, sem escrever uma linha de código.

Veja como isso ajuda você a usar o calc () heroicamente enquanto trabalha silenciosamente nas sombras:

1. Aplique calc () a qualquer campo numérico

Só porque você não está codificando não significa que você é limitado. No Divi 5, Calc () funciona em qualquer lugar em que um valor numérico seja aceito (pense: largura, altura, preenchimento, margem, lacuna, tamanho da fonte, em qualquer lugar). Se o campo aceitar um número, ele suporta calc ().

E a aplicação de calc () é relativamente direta. Tudo o que você precisa fazer é escolher calc () das outras unidades avançadas e inserir sua fórmula.

Isso significa que você pode lidar com o layout matemática visualmente sem deixar o construtor. Seja subtraindo a altura de um cabeçalho fixo, adicionando espaçamento flexível aos tamanhos das fontes ou unidades de mistura para uma melhor capacidade de resposta, o Divi permite fazer tudo isso diretamente dentro dos campos de design.

Basta digitar sua fórmula e o resultado é atualizado instantaneamente-sem painéis de código, sem comutação de guias e sem adivinhação. É controle total, incorporado ao seu fluxo de trabalho.

2. Obtenha visualizações ao vivo instantâneas

Uma das melhores partes sobre o uso do calc () no Divi 5 é que você pode ver o que está fazendo em tempo real. Você não precisa adivinhar como será o espaçamento ou o alinhamento. Quando você insere sua fórmula calc (), o construtor atualiza instantaneamente.

Como você pode ver, o preenchimento mudou imediatamente quando eu digitei os valores calc (). Também alternei entre diferentes pontos de interrupção para mostrar como o preenchimento se ajusta com base no tamanho da tela.

Quaisquer que sejam as alterações que você fizer, você verá o resultado conforme digitar. Esse feedback imediato ajuda a entender como o cálculo afeta seu layout e permite ajustar os valores rapidamente sem alternar as guias.

3. Construa fluxos de trabalho avançados com calc ()

O uso de calc () no Divi 5 não é poderoso porque agora você pode adicionar ou subtrair valores. A força real é desbloquear fluxos de trabalho mais inteligentes. O Divi permite combinar calc () com ferramentas avançadas como Clamp (), variáveis ​​CSS, variáveis ​​de design e predefinições de grupo de opções, todas dentro de um construtor visual.

Você não está limitado a ajustes únicos simples. Usando o Divi, você pode criar sistemas de layout que respondem fluidamente ao tamanho da tela, siga regras de espaçamento consistentes e atualizem automaticamente quando os tokens de design mudarem. Vamos ver como:

1. Estenda o calc () com variáveis ​​CSS

O Divi 5 suporta variáveis ​​CSS diretamente dentro dos campos de design, o que significa que você pode definir valores reutilizáveis ​​e calcular visualmente. Digamos que eu queira usar um preenchimento fixo em todas as minhas seções de página, então salvamos como uma variável CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Para fazer isso, vou para as configurações da página> Avançado> CSS personalizado e adicionar meus valores raiz aqui:

Agora, em vez de inserir a fórmula completa em todos os lugares, você pode apenas usar o VAR (–-Section-padding) em qualquer campo de preenchimento dentro do Divi. O resultado atualiza ao vivo e, se eu alterar o valor raiz posteriormente, todo o layout reflete instantaneamente essa alteração.

Observe que a unidade avançada atualizada mostra o CALC VAR, o que significa que a variável CSS foi inserida usando a função var () dentro de uma fórmula calc ().

O uso de variáveis ​​CSS no Divi é surpreendentemente simples. Você pode defini -los na própria página sem tocar na sua folha de estilo. Isso ajuda a manter uma estrutura de design consistente, testar novos valores e criar regras de layout responsivas.

2. Use calc () em sua estrutura de design

Divi 5 permite salvar valores calc () como variáveis ​​de design, facilitando a reutilização de uma lógica de layout em todo o site. Digamos que você queira que suas seções de serviço sempre preencham a tela menos a altura de um cabeçalho fixo. Em seguida, você pode criar uma variável numérica e nomear a seção de altura com valor calc (120VH - 30px).

Aqui, 30px é a altura do cabeçalho fixo.

Agora, para aplicar a variável salva, vá para as configurações de design da seção e pairar sobre a altura para localizar o ícone de campo dinâmico. Clique nele e sua variável salva será exibida. Clique na altura da seção para aplicá -lo.

Essa abordagem oferece controle de layout completo, mantendo seu design consistente. Você não está preso em predefinições ou valores estáticos. Em vez disso, você está construindo lógica que se adapta ao longo de páginas, modelos e tamanhos de tela todos visualmente.

As variáveis ​​de design desbloqueiam grandes possibilidades. Por exemplo, você pode criar sua estrutura de design visualmente e usá -la em todas as páginas do seu site para manter as regras de design consistentes o tempo todo. Também recomendamos que você construa seus sistemas de tipografia e espaçamento e dimensionamento antes de projetar qualquer página.

3. Criar e salvar predefinições de grupo de opções

Depois que seu layout usa valores calc () de forma consistente, o Divi 5 facilita a economia dessa lógica para a reutilização. Você pode armazenar toda a sua configuração de estilo (ou configurações individuais, como preenchimento, lacunas, margens e larguras) como predefinições de grupo de opções. Isso significa que, em vez de aplicar as fórmulas calc () repetidamente, basta selecionar uma predefinição e a matemática do layout é aplicada instantaneamente.

Por exemplo, se você usou o preenchimento: calc (4Rem + 2VW) em várias seções, não precisa retrodelá -lo em todos os lugares. Apenas salve -o como predefinido:

Agora, aplique sua predefinição salva, sempre que necessário. Tudo é atualizado visualmente, para que você possa ver o efeito ao vivo imediatamente.

Melhor ainda, se você usou variáveis ​​de design nessas predefinições, poderá atualizar os valores globalmente posteriormente. Altere a variável uma vez e todas as predefinições que ela refletirão a atualização. Isso torna as edições em larga escala rápidas e consistentes.

Observe como, alterando os valores salvos nas variáveis ​​de design, elas também são atualizadas na seção de preenchimento, além de nos dar uma prévia ao vivo? Isso porque usei a variável de altura da seção dentro da seção de espaçamento predefinida.

Esse é o Power Divi 5 traz. Ajuda a dimensionar seu sistema de design, mantendo a lógica avançada de layout consistente em todo o site. Depois de se acostumar a combinar unidades avançadas como Calc () (veja aqui mais casos de uso de calc () com dicas sobre como dominar -as de maneira eficaz) com o sistema de design modular da Divi, você desbloqueará uma maneira eficiente e divertida de criar sites.

Divi faz com que a matemática se sinta fácil

Você não precisa ser um desenvolvedor para usar funções CSS como Calc () e Clamp (). O Divi 5 traz essas ferramentas avançadas para uma interface visual fácil de explorar, testar e aplicar. Você pode fazer de tudo, desde ajustes simples de layout a sistemas de design complexos sem escrever uma linha de código.

Esteja você ajustando o espaçamento, usando variáveis ​​ou construindo predefinições reutilizáveis, o Divi torna o design responsivo matemática acessível a todos. Deseja testar o quão suavemente calc () funciona dentro do divi? Faça o download do Divi Public Alpha hoje e experimente por si mesmo.

O Divi 5 está pronto para ser usado em novos sites, mas espere um pouco antes de migrar os existentes.