Können wir die Funktionalität von Sass's dunklen () -Funktion mit CSS -Variablen nachahmen Generieren Sie Schattierungen einer definierten Farbe?
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:
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.
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