Και οι δύο lightenκαι οι darkenλειτουργίες χειρίζονται την ελαφρότητα ενός χρώματος στο χώρο HSL προσθέτοντας ή αφαιρώντας την ελαφρότητα σε αυτό. Βασικά, δεν είναι παρά ψευδώνυμα για την $lightnessπαράμετρο της adjust-colorσυνάρτησης.
Το θέμα είναι ότι αυτές οι λειτουργίες συχνά δεν παρέχουν το αναμενόμενο αποτέλεσμα. Από την άλλη πλευρά, η mixλειτουργία είναι ένας ωραίος τρόπος για να φωτίσετε ή να σκουρύνετε ένα χρώμα αναμειγνύοντάς το με λευκό ή μαύρο.
Το πλεονέκτημα της χρήσης mixκαι όχι μιας από τις δύο προαναφερθείσες λειτουργίες είναι ότι σταδιακά θα μεταβεί σε μαύρο (ή λευκό) καθώς μειώνετε την αναλογία του χρώματος, ενώ darkenκαι lightenθα εκραγεί γρήγορα ένα χρώμα σε μαύρο ή άσπρο.
Για να αποφύγετε να γράφετε τη συνάρτηση mixin κάθε φορά, η οποία δεν είναι μόνο χρονοβόρα αλλά και δεν είναι αρκετά σαφής, μπορείτε εύκολα να δημιουργήσετε δύο συναρτήσεις tintκαι shade(που τυχαίνει να αποτελούν μέρος της Πυξίδας):
/// 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; )