Cả hai lightenvà các darkenhàm điều khiển độ đậm nhạt của một màu trong không gian HSL bằng cách thêm hoặc bớt độ đậm nhạt cho nó. Về cơ bản, chúng không là gì ngoài bí danh cho $lightnesstham số của adjust-colorhàm.
Vấn đề là, những chức năng đó thường không cung cấp kết quả như mong đợi. Mặt khác, mixchức năng này là một cách hay để làm sáng hoặc tối một màu bằng cách trộn nó với màu trắng hoặc đen.
Lợi ích của việc sử dụng mixthay vì một trong hai chức năng đã nói ở trên là nó sẽ chuyển dần sang màu đen (hoặc trắng) khi bạn giảm tỷ lệ màu, trong khi darkenvà lightensẽ nhanh chóng chuyển màu thành đen hoặc trắng.
Để tránh việc viết hàm mixin mỗi lần, không chỉ tốn thời gian mà còn không rõ ràng, bạn có thể dễ dàng tạo hai hàm tintvà shade(cũng là một phần của La bàn):
/// 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); )Sử dụng
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )