Zowel lightenen darkenfuncties manipuleren van de lichtheid van een kleur in de HSL-ruimte door het toevoegen of aftrekken lichtheid aan. In feite zijn het niets anders dan aliassen voor de $lightnessparameter van de adjust-colorfunctie.
Het punt is dat die functies vaak niet het verwachte resultaat opleveren. Aan de andere kant is de mixfunctie een leuke manier om een kleur lichter of donkerder te maken door deze te mengen met wit of zwart.
Het voordeel van het gebruik van in mixplaats van een van de twee bovengenoemde functies is dat het geleidelijk naar zwart (of wit) gaat naarmate u het aandeel van de kleur verkleint, terwijl darkenen lightensnel een kleur helemaal naar zwart of wit uitblaast.
Om te voorkomen dat je de mixin-functie elke keer moet schrijven, wat niet alleen tijdrovend maar ook niet helemaal expliciet is, kun je eenvoudig twee functies maken tinten shade(die toevallig ook deel uitmaken van 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); )Gebruik
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )