Les variables CSS peuvent-elles imiter la fonction « darken() » de Sass pour la génération de nuances de couleur ?

Génération de nuances de couleurs avec des variables CSS : une méthode systématique

Question

Pouvons-nous imiter la fonctionnalité de la fonction darken() de Sass en utilisant des variables CSS pour générer des nuances d'une couleur définie ?

Approche utilisant la couleur relative Syntaxe

CSS introduit une « syntaxe de couleur relative », qui permet ce qui suit :

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

Voici comment cela fonctionne :

• --color-primary : définir la couleur de base.
• --color-primary-darker : Assombrir la couleur de base de 5 % en utilisant hsl().
• --color-primary-darkest : Assombrir la couleur de base de 10 % à l'aide de hsl().

Utilisation

Utilisez ces variables pour éléments de style :

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

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

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

Cette approche vous permet de définir des nuances de couleur de manière dynamique sans modifier la variable de couleur, obtenant ainsi l'effet de dégradé souhaité avec trois nuances.

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!