Abas lightenun darkenfunkcijas manipulē ar krāsas vieglumu HSL telpā, tai pievienojot vai atņemot vieglumu. Būtībā tie nav nekas cits $lightnesskā adjust-colorfunkcijas parametra aizstājvārdi .
Lieta ir tāda, ka šīs funkcijas bieži nenodrošina gaidīto rezultātu. No otras puses, mixfunkcija ir jauks veids, kā krāsu padarīt gaišāku vai tumšāku, sajaucot to ar baltu vai melnu.
Ieguvums, lietojot mixnevis vienu no abām iepriekšminētajām funkcijām, bet gan tas, ka, samazinot krāsas proporciju, tā pakāpeniski kļūs melna (vai balta), turpretī darkenun lightenātri izpūs krāsu līdz melnai vai baltai.
Lai izvairītos no mixin funkcijas rakstīšanas katru reizi, kas ir ne tikai laikietilpīga, bet arī ne visai skaidra, varat viegli izveidot divas funkcijas tintun shade(kas arī notiek kā Compass sastāvdaļa):
/// 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); )Lietošana
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )