Comment puis-je créer des nuances de couleurs CSS comme la fonction « darken() » de Sass en utilisant uniquement des variables CSS ?

Création de nuances de couleurs avec des variables CSS : simulation de la fonction Darken() de Sass

Énoncé du problème :

Création de nuances de couleurs dynamiques pour le survol, le focus et les états actifs en utilisant des variables CSS d'une manière similaire à darken() de Sass function.

Solution :

La spécification CSS Color Module niveau 4 introduit la « syntaxe relative des couleurs », qui permet la manipulation des couleurs à l'aide d'opérations arithmétiques. Cela permet de créer des nuances de couleurs comme suit :

:root {
  --color-primary: #f00; /* any format you want here */
  --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));
}

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

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

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

Dans ce code :

• var(--color-primary) est la couleur d'origine.
• --color-primary-darker est 5 % plus foncé que --color-primary.
• --color-primary-darkest est 10 % plus foncé que --color-primary.

En ajustant les pourcentages dans l'expression calc(), vous pouvez générer différentes nuances de la couleur de base. Cette approche fournit des fonctionnalités similaires à la fonction darken() de Sass, mais en utilisant une syntaxe purement 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!