Как lightenи darkenфункции манипулировать легкость цвета в HSL пространстве путем сложения или вычитания воздушность к нему. По сути, это не что иное, как псевдонимы $lightnessпараметра adjust-colorфункции.
Дело в том, что эти функции часто не дают ожидаемого результата. С другой стороны, эта mixфункция - хороший способ осветлить или затемнить цвет, смешав его с белым или черным.
Преимущество использования mixвместо одной из двух вышеупомянутых функций заключается в том, что она будет постепенно переходить к черному (или белому) по мере уменьшения пропорции цвета, тогда как darkenи lightenбудет быстро выдувать цвет полностью до черного или белого.
Чтобы каждый раз не писать миксин-функцию, что требует не только много времени, но и не совсем явного характера, вы можете легко создать две функции 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; )