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

Erstellen von Farbtönen mit CSS-Variablen: Simulation der Darken()-Funktion von Sass

Problemstellung:

Erstellen dynamischer Farbtöne für Schwebe-, Fokus- und Aktivzustände unter Verwendung von CSS-Variablen auf ähnliche Weise wie Sass‘ Darken() Funktion.

Lösung:

Die CSS Color Module Level 4-Spezifikation führt eine „relative Farbsyntax“ ein, die die Manipulation von Farben mithilfe arithmetischer Operationen ermöglicht. Dies ermöglicht die Erstellung von Farbtönen wie folgt:

: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);
}

In diesem Code:

• var(--color-primary) ist die Originalfarbe.
• --color-primary-darker ist 5 % dunkler als --color-primary.
• --color-primary-darkest ist 10 % dunkler als --color-primary.

Durch Anpassen der Prozentsätze im calc()-Ausdruck können Sie verschiedene Schattierungen der Grundfarbe erzeugen. Dieser Ansatz bietet eine ähnliche Funktionalität wie die Funktion „darken()“ von Sass, verwendet jedoch eine reine CSS-Syntax.

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