Comment puis-je créer des nuances de couleurs CSS à l'aide de variables et d'une syntaxe de couleur relative ?

Création de nuances de couleurs CSS avec des variables

L'obtention de la fonctionnalité de la fonction darken() de Sass dans les variables CSS est possible grâce à la nouvelle syntaxe de couleur relative .

Définissez la variable de couleur primaire (--color-primary) en utilisant le format souhaité. Pour chaque nuance, utilisez la fonction hsl() et calc() pour ajuster la composante de luminosité (l) de la couleur primaire. Par exemple, pour créer une teinte 5 % plus foncée :

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

De même, créez une teinte 10 % plus foncée :

--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));

Attribuez --color-primary à l'arrière-plan de l'élément. Ensuite, appliquez --color-primary-darker et --color-primary-darkest aux états de survol, de mise au point et actif.

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

Cette approche offre une flexibilité dans la définition des nuances de couleur et simplifie le processus de créer des jeux de couleurs cohérents dans un système de variables 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!