Comment puis-je utiliser des variables CSS sans unités pour les pourcentages et les calculs ?

Variables CSS sans unités : gestion de la conversion d'unités

Lorsque vous travaillez avec des variables CSS, il est souvent souhaitable d'utiliser une valeur sans unité pour maintenir la flexibilité et le contrôle sur la présentation. Cependant, les propriétés CSS attendent des unités spécifiques dans diverses situations. Ce guide démontrera une technique pour utiliser des variables sans unités et les convertir de manière transparente dans les unités requises.

Scénario :

Vous devez définir une variable --mywidth avec un valeur numérique. Cependant, dans votre CSS, vous souhaitez utiliser cette variable à la fois comme pourcentage pour la largeur des éléments et comme nombre simple pour les opérations calc().

Solution :

calc() et multiplication d'unités :

Pour y parvenir, utilisez la fonction calc() et effectuez une multiplication simple avec l'unité souhaitée. Par exemple :

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

Cette approche redimensionne la variable sans unité --mywidth en une valeur en pourcentage, en respectant les exigences de la propriété width. De même, pour utiliser la variable comme nombre pour les calculs, ajustez le multiplicateur en conséquence :

calc(var(--mywidth) * 1px)

Exemple :

Considérez le 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;
}

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

Dans cet exemple, la variable --a commence sans unité. Dans la classe .box, calc() est utilisé pour le convertir en pourcentages, pixels et degrés selon les besoins. Le résultat est une boîte avec les dimensions, la largeur de bordure, l'angle de dégradé et le remplissage spécifiés.

Cette technique vous permet de définir des variables CSS avec des valeurs sans unité et de les convertir ensuite dans les unités appropriées, offrant ainsi une plus grande flexibilité et efficacité. dans votre style CSS.

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!