Comment utiliser les variables CSS sans unités avec flexibilité

Les variables CSS sans unités offrent la possibilité de stocker des valeurs numériques qui peuvent être facilement utilisées dans une feuille de style. . Cependant, il peut y avoir des scénarios dans lesquels vous souhaitez utiliser la même variable dans différents contextes, nécessitant des unités variables telles que des pourcentages ou des pixels.

Un exemple de ce dilemme serait de définir une variable CSS avec la valeur 10 mais il faut l'utiliser sous forme de pourcentage dans un cas et comme nombre simple pour les calculs dans un autre.

La solution réside dans l'utilisation de la fonction calc(). En effectuant une simple multiplication de la variable avec l'unité souhaitée dans la fonction calc(), nous pouvons obtenir la flexibilité requise.

Par exemple, pour convertir la variable --mywidth avec une valeur de 10 en pourcentage , utilisez simplement :

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

Cela entraînera la définition de la propriété width sur 10 %, exactement comme prévu.

La polyvalence de cette approche s'étend à différentes unités, vous permettant de basculer de manière transparente entre les pourcentages, les pixels ou toute autre unité de mesure requise dans la même feuille de style.

Pour illustrer cela, considérons l'extrait de code suivant :

: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;
}

Dans cet exemple, la variable --a est utilisée pour définir diverses propriétés, notamment la largeur, la bordure, l'arrière-plan et le remplissage. En utilisant des unités dans la fonction calc(), chaque propriété peut être ajustée dynamiquement en fonction de la valeur stockée dans --a.