„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Können CSS -Variablen die Sass -Funktion von Sass für die Erzeugung von Farbschatten imitieren?

Können CSS -Variablen die Sass -Funktion von Sass für die Erzeugung von Farbschatten imitieren?

Gepostet am 2025-02-06
Durchsuche:693

Can CSS Variables Mimic Sass's `darken()` Function for Color Shade Generation?

Farbschattengenerierung mit CSS -Variablen: Eine systematische Methode

Frage

Können wir die Funktionalität von Sass's dunklen () -Funktion mit CSS -Variablen nachahmen Generieren Sie Schattierungen einer definierten Farbe?

Ansatz unter Verwendung der relativen Farbsyntax

css führt "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:

  • -farb-primary: Definieren Sie die Basisfarbe.
  • -Farb-Primary-Darker: Verdunkeln Sie die Basisfarbe Um 5% verwendete HSL ().
  • -Color-Primary-Darkest: Verdellen Sie die Basisfarbe um 10% mit HSL ().

useage

Verwenden Sie diese Variablen, um Elemente zu stylen:

.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 Farbschatten dynamisch definieren, ohne die Farbvariable zu ändern und den gewünschten Gradienteneffekt mit drei Farbtönen zu erreichen.

Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3