Keduanya lightendan darkenfungsi memanipulasi kecerahan warna di ruang HSL dengan menambahkan atau mengurangi kecerahannya. Pada dasarnya, mereka hanyalah alias untuk $lightnessparameter adjust-colorfungsi.
Masalahnya, fungsi tersebut seringkali tidak memberikan hasil yang diharapkan. Di sisi lain, mixfungsinya adalah cara yang bagus untuk mencerahkan atau menggelapkan warna dengan mencampurkannya dengan putih atau hitam.
Manfaat menggunakan mixdaripada salah satu dari dua fungsi yang disebutkan di atas adalah bahwa itu akan semakin menjadi hitam (atau putih) saat Anda mengurangi proporsi warna, sedangkan darkendan lightenakan dengan cepat meniup warna ke hitam atau putih.
Untuk menghindari penulisan fungsi mixin setiap saat, yang tidak hanya memakan waktu tetapi juga tidak cukup eksplisit, Anda dapat dengan mudah membuat dua fungsi tintdan shade(yang juga merupakan bagian dari 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); )Pemakaian
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )