Comment puis-je générer des nuances de couleurs CSS à l'aide de variables telles que la fonction « darken() » de Sass ?

Utilisation de variables CSS pour créer des nuances de couleurs (comme la fonction darken() de Sass)

En CSS, il est possible de définir une variable de couleur primaire et génère automatiquement des nuances pour les états de survol, de mise au point et d'activité. Voici comment :

Définir la variable de couleur primaire :

:root {
  --color-primary: #f00;
}

Utiliser la syntaxe de couleur relative pour assombrir la couleur primaire :

La spécification CSS introduit la « syntaxe relative des couleurs », qui nous permet de manipuler les couleurs à l'aide d'équations. Pour assombrir la couleur primaire de 5 % :

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

De même, pour assombrir la couleur primaire de 10 % :

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

Application des nuances de couleur :

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

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

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

En définissant la couleur primaire comme variable, nous pouvons désormais la modifier facilement et générer automatiquement des nuances pour diverses États. Cette approche offre un moyen plus facile à gérer et plus efficace pour créer des variations de couleurs par rapport à l'utilisation de classes de couleurs distinctes.

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!