Obě lightena darkenfunkce manipulovat lehkost barvy v HSL prostoru přidáním nebo odečtením lehkost k němu. V zásadě nejsou ničím jiným než aliasem pro $lightnessparametr adjust-colorfunkce.
Jde o to, že tyto funkce často neposkytují očekávaný výsledek. Na druhou stranu je tato mixfunkce příjemným způsobem, jak zesvětlit nebo ztmavit barvu smícháním s bílou nebo černou.
Výhodou použití mixspíše než jedné ze dvou výše zmíněných funkcí je to, že bude postupně přecházet do černé (nebo bílé), jak snižujete podíl barvy, zatímco darkena lightenrychle vyfoukne barvu až k černé nebo bílé.
Abyste se vyhnuli psaní funkce mixin pokaždé, což je nejen časově náročné, ale také ne zcela explicitní, můžete snadno vytvořit dvě funkce tinta shade(které jsou také součástí Compassu):
/// 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); )Používání
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )