एक नंबर क्लैंपिंग - सीएसएस-ट्रिक्स

कंप्यूटर विज्ञान में, हम क्लैंप शब्द का उपयोग दो अन्य नंबरों के बीच एक संख्या को प्रतिबंधित करने के तरीके के रूप में करते हैं। जब क्लैंप किया जाता है, तो एक संख्या या तो अपना मान रखेगी यदि दो अन्य मानों द्वारा लगाई गई सीमा में रहते हैं, तो कम मूल्य लें यदि शुरू में इससे कम है, या उच्चतर अगर शुरुआत में इससे अधिक है।

आगे जाने से पहले एक त्वरित उदाहरण के रूप में:

$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1

वापस सीएसएस पर आ रहा है। कुछ तरीके हैं जहां आपको दो अन्य लोगों के बीच प्रतिबंधित होने के लिए एक नंबर की आवश्यकता हो सकती है। opacityउदाहरण के लिए संपत्ति लें : यह एक फ्लोट (0 और 1 के बीच) होना चाहिए। यह आम तौर पर उस तरह का मूल्य है जिसे आप यह सुनिश्चित करने के लिए दबाना चाहेंगे कि यह न तो नकारात्मक है और न ही 1 से अधिक है।

सैस में एक क्लैंप फंक्शन को लागू करना दो तरह से किया जा सकता है, दोनों सख्ती से बराबर हैं फिर भी एक दूसरे की तुलना में बहुत अधिक सुरुचिपूर्ण है। चलिए शुरू करते हैं इसलिए महान नहीं।

गंदा है

यह संस्करण नेस्टेड ifफ़ंक्शन कॉल पर निर्भर करता है । मूल रूप से हम कहते हैं: यदि इससे $numberकम है $min, तो रखें $min, अन्यथा यदि $numberअधिक से अधिक है $max, तो रखें $max, और रखें $number।

/// Clamp `$number` between `$min` and `$max` /// @param (Number) $number - Number to clamp /// @param (Number) $min - Minimum value /// @param (Number) $max - Maximum value /// @return (Number) @function clamp($number, $min, $max) ( @return if($number $max, $max, $number)); )

यदि आप कॉल के लिए नेस्टेड के साथ बहुत आश्वस्त नहीं हैं, तो पिछले कथन के बारे में सोचें:

@if $number $max ( @return $max; ) @return $number;

साफ एक

यह संस्करण बहुत अधिक सुरुचिपूर्ण है क्योंकि यह सास से दोनों minऔर maxकार्यों का अच्छा उपयोग करता है।

/// Clamp `$number` between `$min` and `$max` /// @param (Number) $number - Number to clamp /// @param (Number) $min - Minimum value /// @param (Number) $max - Maximum value /// @return (Number) @function clamp($number, $min, $max) ( @return min(max($number, $min), $max); )

शाब्दिक अर्थ के बीच कम से कम रखने $maxऔर के बीच अधिकतम $numberऔर $min।

उदाहरण

अब, प्रदर्शन के लिए थोड़ा अस्पष्ट मिश्रण बनाएं

/// Opacity mixin /// @param (Float) $value - Opacity value /// @output `opacity` @mixin opacity($value) ( $clamped-value: clamp($value, 0, 1); @if $value != $clamped-value ( @warn "Mixin `opacity` needs a float; #($value) given, clamped to #($clamped-value)."; ) opacity: $clamped-value; )