Les variables CSS peuvent-elles être utilisées dynamiquement avec différentes unités ?

Variables CSS sans unités avec unités dynamiques

La manipulation des variables CSS peut souvent présenter des défis lors de l'utilisation de valeurs basées sur un pourcentage et sans unités. Cette question explore comment attribuer une variable CSS sans unité, puis l'utiliser de manière interchangeable avec différentes unités.

Question :

Une variable CSS peut-elle être définie avec un nombre, puis utilisé comme pourcentage dans un cas et comme nombre simple dans un autre ? Par exemple :

--mywidth:10;

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

Réponse :

Oui, il est possible d'y parvenir en utilisant la fonction calc(). En multipliant la variable par une unité appropriée, nous pouvons la convertir dynamiquement dans n'importe quelle unité souhaitée.

Pour utiliser la variable --mywidth en pourcentage, nous pouvons la multiplier par 1 % :

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

Exemple :

Le code suivant démontre l'utilisation de la fonction calc() pour ajouter dynamiquement des unités à une variable CSS sans unités :

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

<div class="box"></div>

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!