Obje lightente darkenfunkcije manipulirati lakoću boje u HSL prostora dodavanjem ili oduzimanjem lakoću na njega. U osnovi, oni su ništa drugo do pseudonimi za $lightnessparametar adjust-colorfunkcije.
Stvar je u tome što te funkcije često ne daju očekivani rezultat. S druge strane, mixfunkcija je lijep način za posvjetljivanje ili zatamnjenje boje miješanjem s bijelom ili crnom.
Prednost korištenja mix, nego jedan od dva gore navedenih funkcija je da će postupno ići na crno (ili bijela) kao što smanjiti udio boje, a darkente lightenće se brzo ispuhati boju sve do crne ili bijele.
Da biste izbjegli pisanje funkcije mixin svaki put, što ne samo da dugo traje već i nije sasvim eksplicitno, lako možete stvoriti dvije funkcije tinti shade(koje su također dio 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); )Upotreba
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )