Funkcie obaja lightena darkenfunkcie manipulujú s ľahkosťou farby v priestore HSL pridaním alebo odčítaním ľahkosti. V zásade nejde o nič iné ako aliasy pre $lightnessparameter adjust-colorfunkcie.
Ide o to, že tieto funkcie často neposkytujú očakávaný výsledok. Na druhej strane je táto mixfunkcia príjemným spôsobom, ako zosvetliť alebo stmaviť farbu zmiešaním s bielou alebo čiernou farbou.
Výhodou použitia mixskôr než jednej z dvoch vyššie uvedených funkcií je to, že bude postupne prechádzať do čiernej (alebo bielej) farby, keď znižujete podiel farby, zatiaľ čo darkena farbu lightenrýchlo vyfúknete až do čiernej alebo bielej.
Aby ste zabránili opakovanému písaniu funkcie mixin, ktorá je nielen časovo náročná, ale aj nie celkom explicitná, môžete ľahko vytvoriť dve funkcie tinta shade(ktoré sú tiež súčasťou Compassu):
/// 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); )Využitie
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )