As funções lightene darkenmanipulam a luminosidade de uma cor no espaço HSL adicionando ou subtraindo luminosidade a ela. Basicamente, eles nada mais são do que apelidos para o $lightnessparâmetro da adjust-colorfunção.
O fato é que essas funções geralmente não fornecem o resultado esperado. Por outro lado, a mixfunção é uma ótima maneira de clarear ou escurecer uma cor misturando-a com branco ou preto.
A vantagem de usar em mixvez de uma das duas funções mencionadas acima é que ele irá progressivamente para preto (ou branco) conforme você diminui a proporção da cor, enquanto que darkene lightenirá rapidamente estourar uma cor para preto ou branco.
Para evitar escrever a função mixin todas as vezes, o que não é apenas demorado, mas também não é totalmente explícito, você pode facilmente criar duas funções tinte shade(que também fazem parte do 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; )