Både lightenog darkenfunksjoner manipulerer lysstyrken til en farge i HSL-rommet ved å legge til eller trekke lysstyrke fra den. I utgangspunktet er de ikke annet enn aliaser for $lightnessparameteren til adjust-colorfunksjonen.
Saken er at disse funksjonene ofte ikke gir det forventede resultatet. På den annen side er mixfunksjonen en fin måte å gjøre en farge lysere eller mørkere ved å blande den med enten hvit eller svart.
Fordelen med å bruke i mixstedet for en av de to nevnte funksjonene er at den gradvis vil gå til svart (eller hvitt) når du reduserer andelen av fargen, mens darkenog lightenraskt vil blåse ut en farge helt til svart eller hvit.
For å unngå å skrive mixin-funksjonen hver gang, som ikke bare er tidkrevende, men ikke helt eksplisitt, kan du enkelt opprette to funksjoner tintog shade(som også tilfeldigvis er en del av 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); )Bruk
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )