Både lightenoch darkenfunktioner manipulera lätthet en färg i HSL utrymme genom att addera eller subtrahera lätthet till den. I grund och botten är de inget annat än alias för funktionens $lightnessparameter adjust-color.
Saken är att dessa funktioner ofta inte ger det förväntade resultatet. Å andra sidan är mixfunktionen ett trevligt sätt att göra en färg ljusare eller mörkare genom att blanda den med antingen vit eller svart.
Fördelen med att använda mixsnarare än en av de två ovan nämnda funktionerna är att den gradvis går till svart (eller vitt) när du minskar andelen av färgen, medan darkenoch lightensnabbt blåser ut en färg hela vägen till svart eller vitt.
För att undvika att skriva blandningsfunktionen varje gång, vilket inte bara är tidskrävande men inte heller uttryckligt, kan du enkelt skapa två funktioner tintoch shade(som också råkar vara 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); )Användande
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )