Comment puis-je attribuer dynamiquement des unités aux variables CSS ?

Affectation dynamique d'unités aux variables CSS

En CSS, la possibilité d'utiliser des variables offre une flexibilité et une maintenabilité significatives. Cependant, attribuer des valeurs sans unité aux variables peut présenter des défis lors de leur utilisation à des fins différentes. Cet article aborde le problème de la définition d'une variable CSS avec une valeur numérique puis de l'attribution dynamique d'unités en fonction de son utilisation.

Considérons l'exemple suivant :

--mywidth: 10;

div {
  width: var(--mywidth) + %;  // should be => width: 10%
}

L'objectif est d'utiliser le - -mywidth variable en pourcentage pour certaines propriétés CSS et en nombre pour d'autres, comme les opérations calc().

La solution réside dans l'exploitation de la puissance de calc(). En effectuant une simple multiplication entre la variable et l'unité souhaitée, vous pouvez attribuer dynamiquement des unités selon vos besoins.

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

Cette approche garantit que la variable conserve sa valeur numérique tout en vous permettant de spécifier des unités en fonction de l'unité spécifique. propriété que vous utilisez.

Par exemple, considérons l'exemple suivant :

:root {
  --a: 50;
}

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

Dans cet exemple, la variable --a est utilisée dans toute la classe .box, avec des unités attribuées dynamiquement à l'aide de calc().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!