दोनों lightenऔर darkenफ़ंक्शन एचएसएल अंतरिक्ष में एक रंग की लपट को जोड़ते हैं या इसमें लपट को घटाते हैं। मूल रूप से, वे फ़ंक्शन के $lightnessपैरामीटर के लिए उपनाम के अलावा कुछ भी नहीं हैं adjust-color।
बात यह है कि, वे कार्य अक्सर अपेक्षित परिणाम प्रदान नहीं करते हैं। दूसरी ओर, mixफ़ंक्शन एक रंग को हल्का या गहरा करने के लिए इसे सफेद या काले रंग के साथ मिलाकर एक अच्छा तरीका है।
उपयोग करने का लाभ mixके बजाय दो उपर्युक्त कार्यों में से एक है कि यह उत्तरोत्तर काले (या सफेद) के लिए जाना जाएगा के रूप में आप जबकि, रंग के अनुपात में कमी है darkenऔर lightenजल्दी से बाहर एक रंग काला या सफेद करने के लिए सभी तरह से झटका होगा।
हर बार मिक्सिन फ़ंक्शन लिखने से बचने के लिए, जो न केवल समय लेने वाला है, बल्कि काफी स्पष्ट भी है, आप आसानी से दो फ़ंक्शन बना सकते हैं 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; )