Les deux fonctions lightenet darkenmanipulent la clarté d'une couleur dans l'espace TSL en lui ajoutant ou en lui soustrayant de la clarté. Fondamentalement, ce ne sont que des alias pour le $lightnessparamètre de la adjust-colorfonction.
Le fait est que ces fonctions ne fournissent souvent pas le résultat attendu. D'autre part, la mixfonction est un bon moyen d'éclaircir ou d'assombrir une couleur en la mélangeant avec du blanc ou du noir.
L'avantage d'utiliser mixplutôt que l'une des deux fonctions susmentionnées est que cela passera progressivement au noir (ou au blanc) à mesure que vous diminuerez la proportion de la couleur, alors que darkenet lightenfera rapidement exploser une couleur jusqu'au noir ou au blanc.
Afin d'éviter d'écrire la fonction mixin à chaque fois, ce qui est non seulement long mais pas tout à fait explicite, vous pouvez facilement créer deux fonctions tintet shade(qui font également partie de 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); )Usage
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )