Både lightenog darkenfunktioner manipulerer lysets farve i HSL-rummet ved at tilføje eller trække lysstyrke til den. Dybest set er de intet andet end aliaser for funktionens $lightnessparameter adjust-color.
Sagen er, at disse funktioner ofte ikke giver det forventede resultat. På den anden side er mixfunktionen en god måde at gøre en farve lysere eller mørkere ved at blande den med enten hvid eller sort.
Fordelen ved at bruge mixsnarere end en af de to førnævnte funktioner er, at den gradvist går til sort (eller hvid), når du reducerer andelen af farven, mens darkenog lightenhurtigt vil blæse en farve ud til sort eller hvid.
For at undgå at skrive mixin-funktionen hver gang, hvilket ikke kun er tidskrævende men heller ikke helt eksplicit, kan du nemt oprette to funktioner tintog shade(som også tilfældigvis er en del af 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); )Anvendelse
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )