Hem lightenve hem de darkenişlevler, HSL uzayındaki bir rengin açıklığını, ona açıklık ekleyerek veya çıkararak işler. Temel olarak, bunlar işlevin $lightnessparametresi için takma adlardan başka bir şey değildir adjust-color.
Mesele şu ki, bu işlevler genellikle beklenen sonucu sağlamaz. Öte yandan, mixişlev, bir rengi beyaz veya siyahla karıştırarak aydınlatmanın veya koyulaştırmanın güzel bir yoludur.
mixYukarıda belirtilen iki işlevden birini kullanmanın yararı , rengin oranını düşürdükçe aşamalı olarak siyaha (veya beyaza) geçecek darkenve lightenbir rengi hızla siyah veya beyaza tamamen dağıtacak olmasıdır.
Sadece zaman alıcı değil, aynı zamanda çok açık olmayan mixin işlevini her seferinde yazmaktan kaçınmak için, kolayca iki işlev oluşturabilirsiniz tintve shade(bu da Compass'ın bir parçasıdır):
/// 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); )Kullanım
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )