Както lightenи darkenфункции манипулират лекотата на цвят в пространството на HSL чрез добавяне или изваждане лекота с него. По принцип те не са нищо друго освен псевдоними за $lightnessпараметъра на adjust-colorфункцията.
Работата е там, че тези функции често не осигуряват очаквания резултат. От друга страна, mixфункцията е приятен начин за изсветляване или потъмняване на цвят чрез смесване с бял или черен цвят.
Ползата от използването на mixедна от двете гореспоменати функции е, че тя постепенно ще премине към черно (или бяло), докато намалявате дела на цвета, докато darkenи lightenбързо ще издухва цвят чак до черно или бяло.
За да избегнете писането на функцията mixin всеки път, което не само отнема много време, но и не е съвсем изрично, можете лесно да създадете две функции tintи shade(които също са част от 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); )Употреба
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )