Obie funkcje lighteni darkenmanipulują jasnością koloru w przestrzeni HSL, dodając lub odejmując do niego jasność. Zasadniczo są one niczym innym jak aliasami dla $lightnessparametru adjust-colorfunkcji.
Rzecz w tym, że te funkcje często nie dają oczekiwanego rezultatu. Z drugiej strony mixfunkcja ta jest dobrym sposobem na rozjaśnienie lub przyciemnienie koloru poprzez zmieszanie go z białym lub czarnym.
Zaletą używania mixraczej niż jednej z dwóch wyżej wymienionych funkcji jest to, że będzie stopniowo przechodzić na czarny (lub biały), gdy zmniejszysz proporcję koloru, podczas gdy darkeni lightenszybko wydmuchnie kolor aż do czerni lub bieli.
Aby uniknąć pisania funkcji mixin za każdym razem, co jest nie tylko czasochłonne, ale także nie do końca jasne, możesz łatwo utworzyć dwie funkcje tinti shade(które również są częścią 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); )Stosowanie
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )