Beide lightenund darkenFunktionen manipulieren die Helligkeit einer Farbe im HSL-Raum, indem sie Helligkeit addieren oder subtrahieren. Grundsätzlich sind sie nichts anderes als Aliase für den $lightnessParameter der adjust-colorFunktion.
Die Sache ist, dass diese Funktionen oft nicht das erwartete Ergebnis liefern. Andererseits ist die mixFunktion eine gute Möglichkeit, eine Farbe aufzuhellen oder abzudunkeln, indem sie entweder mit Weiß oder Schwarz gemischt wird.
Der Vorteil der Verwendung mixeher als eine der beiden oben genannten Funktionen ist , dass es schrittweise zu schwarz gehen (oder weiß) , wie Sie den Anteil der Farbe ab, während darkenund lightenschnell eine Farbe den ganzen Weg nach schwarz oder weiß ausblasen.
Um zu vermeiden, dass die Mixin-Funktion jedes Mal geschrieben wird, was nicht nur zeitaufwändig, sondern auch nicht ganz explizit ist, können Sie einfach zwei Funktionen erstellen tintund shade(die zufällig auch Teil von Compass sind):
/// Slightly lighten a color /// @access public /// @param (Color) $color - color to tint /// @param (Number) $percentage - percentage of `$color` in returned color /// @return (Color) @function tint($color, $percentage) ( @return mix(white, $color, $percentage); ) /// Slightly darken a color /// @access public /// @param (Color) $color - color to shade /// @param (Number) $percentage - percentage of `$color` in returned color /// @return (Color) @function shade($color, $percentage) ( @return mix(black, $color, $percentage); )Verwendung
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )