Wie kann ich CSS-Farbtöne mit Variablen wie der Funktion „darken()' von Sass generieren?

Verwenden von CSS-Variablen zum Erstellen von Farbtönen (wie die Funktion „darken()“ von Sass)

In CSS ist es möglich, eine Primärfarbvariable zu definieren und automatisch Schattierungen für Schwebe-, Fokus- und Aktivzustände generieren. So geht's:

Definieren der Primärfarbvariablen:

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

Verwenden der relativen Farbsyntax zum Abdunkeln der Primärfarbe:

Die CSS-Spezifikation führt eine „relative Farbsyntax“ ein, die es uns ermöglicht, Farben mithilfe von Gleichungen zu manipulieren. Um die Primärfarbe um 5 % abzudunkeln:

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

Ähnlich, um die Primärfarbe um 10 % abzudunkeln:

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

Anwenden der Farbtöne:

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

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

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

Indem wir die Primärfarbe als Variable definieren, können wir sie jetzt einfach ändern und automatisch Schattierungen für verschiedene Zustände generieren. Dieser Ansatz bietet eine wartbarere und effizientere Möglichkeit, Farbvariationen zu erstellen, als separate Farbklassen zu verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Farbtöne mit Variablen wie der Funktion „darken()' von Sass generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!