Variáveis ​​CSS sem unidade: Tratamento da conversão de unidade

Ao trabalhar com variáveis ​​CSS, geralmente é desejável usar um valor sem unidade para manter a flexibilidade e o controle sobre a apresentação. No entanto, as propriedades CSS esperam unidades específicas em diversas situações. Este guia demonstrará uma técnica para usar variáveis ​​sem unidade e convertê-las perfeitamente nas unidades necessárias.

Cenário:

Você precisa definir uma variável --mywidth com um valor numérico. No entanto, dentro do seu CSS, você deseja utilizar essa variável como uma porcentagem para a largura dos elementos e um número simples para operações calc().

Solução:

calc() e multiplicação de unidades:

Para conseguir isso, utilize a função calc() e execute uma multiplicação simples com a unidade desejada. Por exemplo:

div { width: calc(var(--mywidth) * 1%); }

Essa abordagem redimensiona a variável sem unidade --mywidth para um valor percentual, aderindo ao requisito da propriedade width. Da mesma forma, para usar a variável como um número para cálculos, ajuste o multiplicador adequadamente:

calc(var(--mywidth) * 1px)

Exemplo:

Considere o seguinte código:

:root {
  --a: 50;
}

.box {
  width: calc(var(--a) * 1%);
  border: calc(var(--a) * 0.5px) solid red;
  background: linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);
  padding: 20px;
  box-sizing: border-box;
}

Neste exemplo, a variável --a começa sem unidade. Dentro da classe .box, calc() é usado para convertê-lo em porcentagens, pixels e graus conforme necessário. O resultado é uma caixa com as dimensões especificadas, largura da borda, ângulo de gradiente e preenchimento.

Essa técnica permite definir variáveis ​​CSS com valores sem unidade e posteriormente convertê-las nas unidades apropriadas, proporcionando maior flexibilidade e eficiência no seu estilo CSS.