Ambele lightenși darkenfuncțiile manipulează luminozitatea unei culori în spațiul HSL adăugând sau scăzând luminozitatea acesteia. Practic, acestea nu sunt altceva decât aliasuri pentru $lightnessparametrul adjust-colorfuncției.
Problema este că acele funcții nu oferă adesea rezultatul scontat. Pe de altă parte, mixfuncția este un mod frumos de a deschide sau întuneca o culoare amestecând-o cu alb sau negru.
Avantajul utilizării mixmai degrabă decât una dintre cele două funcții menționate mai sus este că va merge progresiv la negru (sau alb) pe măsură ce reduceți proporția culorii, în timp ce darkenși lightenva arunca rapid o culoare până la alb sau negru.
Pentru a evita scrierea de fiecare dată a funcției mixin, care nu numai că consumă mult timp, dar nu este chiar explicită, puteți crea cu ușurință două funcții tintși shade(care se întâmplă, de asemenea, să facă parte din Compass):
/// 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); )Utilizare
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )