Entrambe le funzioni lightene darkenmanipolano la luminosità di un colore nello spazio HSL aggiungendo o sottraendo luminosità ad esso. Fondamentalmente, non sono altro che alias per il $lightnessparametro della adjust-colorfunzione.
Il fatto è che queste funzioni spesso non forniscono il risultato atteso. D'altra parte, la mixfunzione è un bel modo per schiarire o scurire un colore mescolandolo con il bianco o il nero.
Il vantaggio di utilizzare mixinvece di una delle due funzioni di cui sopra è che andrà progressivamente al nero (o al bianco) man mano che si diminuisce la proporzione del colore, mentre darkene lightenspegnerà rapidamente un colore fino al bianco o al nero.
Per evitare di scrivere ogni volta la funzione mixin, che non solo richiede tempo ma anche non del tutto esplicita, puoi facilmente creare due funzioni tinte shade(che fanno anche parte di 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); )Utilizzo
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )