Können CSS-Variablen die Funktion „darken()' von Sass zur Farbtonerzeugung nachahmen?

Farbtonerzeugung mit CSS-Variablen: Eine systematische Methode

Frage

Können wir die Funktionalität der Funktion „darken()“ von Sass mithilfe von CSS-Variablen nachahmen? Schattierungen einer definierten Farbe erzeugen?

Ansatz mit relativer Farbsyntax

CSS führt die „relative Farbsyntax“ ein, die Folgendes ermöglicht:

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

So funktioniert es:

• --color-primary: Definieren Sie die Grundfarbe.
• --color-primary-darker: Verdunkeln Sie die Grundfarbe um 5 % mit hsl().
• --color-primary-darkest: Verdunkelt die Grundfarbe um 10 % mit hsl().

Verwendung

Verwenden Sie diese Variablen, um Stilelemente:

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

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

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

Mit diesem Ansatz können Sie Farbtöne dynamisch definieren, ohne die Farbvariable zu ändern und so das gewünschte Ergebnis zu erzielen Farbverlaufseffekt mit drei Farbtönen.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Variablen die Funktion „darken()' von Sass zur Farbtonerzeugung nachahmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!