Cómo usar variables CSS sin unidades con flexibilidad

Las variables CSS sin unidades brindan la capacidad de almacenar valores numéricos que se pueden usar convenientemente en toda una hoja de estilo . Sin embargo, pueden surgir escenarios en los que desee utilizar la misma variable en diferentes contextos, lo que requiere unidades variables, como porcentajes o píxeles.

Un ejemplo de este dilema sería establecer una variable CSS con el valor de 10, pero necesitando usarlo como porcentaje en un caso y como un número simple para cálculos en otro.

La solución radica en utilizar la función calc(). Al realizar una simple multiplicación de la variable con la unidad deseada dentro de la función calc(), podemos lograr la flexibilidad requerida.

Por ejemplo, para convertir la variable --mywidth con un valor de 10 en un porcentaje , simplemente use:

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

Esto dará como resultado que la propiedad de ancho se establezca en 10%, exactamente como se esperaba.

La versatilidad de este enfoque se extiende a varias unidades, lo que le permite cambiar sin problemas entre porcentajes, píxeles o cualquier otra unidad de medida requerida dentro de la misma hoja de estilo.

Para ilustrar esto, considere el siguiente fragmento 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;
}

En este ejemplo, la variable --a se usa para definir varias propiedades, incluido el ancho, el borde, el fondo y el relleno. Al utilizar unidades dentro de la función calc(), cada propiedad se puede ajustar dinámicamente según el valor almacenado en --a.