Variables CSS sin unidades: manejo de la conversión de unidades

Cuando se trabaja con variables CSS, a menudo es deseable utilizar un valor sin unidades para mantener la flexibilidad y el control sobre la presentación. Sin embargo, las propiedades CSS esperan unidades específicas en diversas situaciones. Esta guía demostrará una técnica para utilizar variables sin unidades y convertirlas sin problemas a las unidades requeridas.

Escenario:

Necesita definir una variable --mywidth con un valor numérico. Sin embargo, dentro de su CSS, desea utilizar esta variable como un porcentaje para el ancho de los elementos y un número simple para las operaciones calc().

Solución:

calc() y multiplicación de unidades:

Para lograr esto, emplee la función calc() y realice una multiplicación simple con la unidad deseada. Por ejemplo:

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

Este enfoque cambia la escala de la variable sin unidades --mywidth a un valor porcentual, cumpliendo con el requisito de la propiedad de ancho. De manera similar, para usar la variable como un número para los cálculos, ajuste el multiplicador en consecuencia:

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

Ejemplo:

Considere el siguiente 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 comienza sin unidades. Dentro de la clase .box, calc() se usa para convertirlo a porcentajes, píxeles y grados según sea necesario. El resultado es un cuadro con las dimensiones, ancho de borde, ángulo de degradado y relleno especificados.

Esta técnica le permite definir variables CSS con valores sin unidades y posteriormente convertirlas a las unidades apropiadas, lo que proporciona mayor flexibilidad y eficiencia. en tu estilo CSS.