Kedua lighten- duanya dan darkenfungsi memanipulasi cahaya warna di ruang HSL dengan menambahkan atau mengurangkan cahaya ke dalamnya. Pada dasarnya, mereka hanyalah alias untuk $lightnessparameter adjust-colorfungsi.
Masalahnya, fungsi tersebut sering kali tidak memberikan hasil yang diharapkan. Sebaliknya, mixfungsinya adalah cara yang baik untuk meringankan atau menggelapkan warna dengan mencampurkannya dengan warna putih atau hitam.
Manfaat menggunakan mixdaripada salah satu dari dua fungsi yang disebutkan di atas adalah bahawa ia akan berubah menjadi hitam (atau putih) secara beransur-ansur apabila anda mengurangkan bahagian warna, sedangkan darkendan lightenakan dengan cepat mengeluarkan warna hingga hitam atau putih.
Untuk mengelakkan menulis fungsi mixin setiap masa, yang bukan hanya memakan masa tetapi juga tidak terlalu jelas, anda boleh membuat dua fungsi dengan mudah tintdan shade(yang juga merupakan sebahagian daripada Kompas):
/// 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); )Penggunaan
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )