Mõlemad lightenja darkenfunktsioonid manipuleerivad värvi heledusega HSL-ruumis, lisades või lahutades sellele heleduse. Põhimõtteliselt pole need $lightnessmuud kui adjust-colorfunktsiooni parameetri varjunimed .
Asi on selles, et need funktsioonid ei anna sageli oodatud tulemust. Teiselt poolt on see mixfunktsioon mõnus viis värvi heledamaks või tumedamaks, segades seda kas valge või mustaga.
Eespool mixnimetatud kahe funktsiooni asemel ühe kasutamise eeliseks on see, et see muutub järk-järgult mustaks (või valgeks), kui vähendate värvi osakaalu, samal ajal darkenkui lightensee puhub värvi kiiresti mustaks või valgeks.
Selleks, et vältida mixini funktsiooni iga kord kirjutamist, mis pole mitte ainult aeganõudev, vaid ka mitte üsna selgesõnaline, saate hõlpsasti luua kaks funktsiooni tintja shade(mis juhtumisi kuuluvad ka Compassi):
/// 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); )Kasutamine
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )