Як 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; )