颜色调整和阴影函数

lighten 和 darken 函数都通过在 HSL 空间中添加或减去亮度来操作颜色的亮度。基本上，它们只是 adjust-color 函数的 $lightness 参数的别名。

问题是，这些函数通常不会产生预期结果。另一方面，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;
}