Comment appliquer des unités à des variables CSS sans unités ?

Personnalisation des variables CSS sans unités avec les unités souhaitées

En CSS, la possibilité de définir des variables sans unités permet une plus grande flexibilité dans le style. Cependant, il est courant de rencontrer des situations dans lesquelles la variable doit être utilisée à plusieurs endroits avec des unités différentes, telles que le pourcentage pour la largeur et les pixels pour les opérations calc().

Présentation de calc() et de la multiplication d'unités

Pour résoudre ce problème, la fonction calc() peut être utilisée pour ajouter explicitement l'unité souhaitée à la variable. En multipliant la variable par le coefficient unitaire approprié (par exemple, 1 %), il est possible d'obtenir le comportement souhaité.

Exemple :

Considérons un scénario dans lequel un CSS La variable --mywidth est définie sur 10. Pour l'utiliser comme pourcentage de largeur, écrivez simplement :

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

Ce calcul multiplie efficacement --mywidth par 1 % (0,01), ce qui donne une valeur de largeur de 10 %.

Cas d'utilisation étendue :

En plus du pourcentage, vous pouvez utiliser ceci technique pour ajouter n'importe quelle unité souhaitée :

• Pour les pixels : calc(var(--mywidth) * 1px)
• Pour les degrés : calc(var(--mywidth) * 1deg)
• Pour l'opacité : calc(var(--mywidth) * 0.1)

Démonstration :

L'extrait suivant illustre l'application de cette technique :

: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, l'élément box démontre l'utilisation de --a avec différentes unités, notamment le pourcentage pour la largeur, les pixels pour la bordure, les degrés pour l'angle de dégradé linéaire et pixels pour le remplissage.

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!