Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je utiliser des variables CSS sans unités avec différentes unités ?

Patricia Arquette
Libérer: 2024-11-14 12:25:02
original
175 Les gens l'ont consulté

How Can I Use Unitless CSS Variables with Different Units?

Comment utiliser des 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%);}
Copier après la connexion

La propriété width sera alors définie sur 10 %, exactement comme prévu.

La polyvalence de cette approche s'étend à diverses unités, vous permettant de basculer 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;
}
Copier après la connexion

Dans cet exemple, la variable - -a est utilisé 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.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal