Como usar variáveis ​​CSS sem unidade com flexibilidade

As variáveis ​​CSS sem unidade fornecem a capacidade de armazenar valores numéricos que podem ser usados ​​convenientemente em uma folha de estilo . No entanto, podem surgir cenários em que você deseja usar a mesma variável em contextos diferentes, exigindo unidades variadas, como porcentagens ou pixels.

Um exemplo desse dilema seria definir uma variável CSS com o valor 10, mas a necessidade de usá-lo como uma porcentagem em uma instância e como um número simples para cálculos em outra.

A solução está na utilização da função calc(). Ao realizar uma simples multiplicação da variável com a unidade desejada dentro da função calc(), podemos obter a flexibilidade necessária.

Por exemplo, para converter a variável --mywidth com um valor de 10 em uma porcentagem , basta usar:

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

Isso resultará na propriedade width sendo definida como 10%, exatamente como pretendido .

A versatilidade dessa abordagem se estende a várias unidades, permitindo alternar perfeitamente entre porcentagens, pixels ou qualquer outra unidade de medida necessária na mesma folha de estilo.

Para ilustrar isso, considere o seguinte trecho de 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 é usada para definir várias propriedades, incluindo largura, borda, plano de fundo e preenchimento. Ao utilizar unidades dentro da função calc(), cada propriedade pode ser ajustada dinamicamente com base no valor armazenado em --a.