Obe funkciji lightenin darkenmanipulirata lahkotnost barve v prostoru HSL tako, da ji dodaš ali odšteješ svetlobo. V bistvu niso nič drugega kot vzdevki za $lightnessparameter adjust-colorfunkcije.
Stvar je v tem, da te funkcije pogosto ne zagotavljajo pričakovanega rezultata. Po drugi strani pa je mixfunkcija dober način za osvetlitev ali zatemnitev barve z mešanjem z belo ali črno.
Korist od uporabe mixin ne eden od obeh navedenih funkcij je, da bo postopoma iti na črno (ali belo), ko se zmanjša delež barve, medtem ko je darkenin lightenbo hitro upihnil barvo vse do črne ali bele barve.
Da se izognete pisanju funkcije mixin vsakič, kar je ne le dolgotrajno, ampak tudi ne povsem eksplicitno, lahko preprosto ustvarite dve funkciji tintin shade(ki sta prav tako del Compassa):
/// 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); )Uporaba
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )