Ambas funciones lighteny darkenmanipulan la luminosidad de un color en el espacio HSL añadiéndole o restando luminosidad. Básicamente, no son más que alias para el $lightnessparámetro de la adjust-colorfunción.
La cuestión es que esas funciones a menudo no proporcionan el resultado esperado. Por otro lado, la mixfunción es una buena forma de aclarar u oscurecer un color mezclándolo con blanco o negro.
El beneficio de usar en mixlugar de una de las dos funciones mencionadas anteriormente es que pasará progresivamente a negro (o blanco) a medida que disminuya la proporción del color, mientras que darkeny lightenrápidamente se convertirá en negro o blanco.
Para evitar escribir la función mixin cada vez, lo cual no solo requiere mucho tiempo sino que tampoco es muy explícito, puede crear fácilmente dos funciones tinty shade(que también son parte de 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); )Uso
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )