Στην επιστήμη των υπολογιστών, χρησιμοποιούμε τη λέξη clamp ως τρόπο περιορισμού ενός αριθμού μεταξύ δύο άλλων αριθμών. Όταν συσφίγγεται, ένας αριθμός είτε θα διατηρήσει τη δική του τιμή εάν ζει στο εύρος που επιβάλλεται από τις δύο άλλες τιμές, παίρνει τη χαμηλότερη τιμή εάν αρχικά είναι χαμηλότερη από αυτήν, ή την υψηλότερη εάν αρχικά είναι υψηλότερη από αυτήν.
Ως γρήγορο παράδειγμα προτού προχωρήσουμε περαιτέρω
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Επιστροφή στο CSS. Υπάρχουν μερικοί τρόποι με τους οποίους μπορεί να χρειαστεί να περιοριστεί ένας αριθμός μεταξύ δύο άλλων. Πάρτε το opacityακίνητο για παράδειγμα: πρέπει να είναι float (μεταξύ 0 και 1). Αυτό είναι συνήθως το είδος της τιμής που θέλετε να στερεώσετε για να βεβαιωθείτε ότι δεν είναι ούτε αρνητική ούτε υψηλότερη από 1.
Η εφαρμογή μιας λειτουργίας σφιγκτήρα στο Sass μπορεί να γίνει με δύο τρόπους, και οι δύο αυστηρά ισοδύναμοι, αλλά ο ένας είναι πολύ πιο κομψός από τον άλλο. Ας ξεκινήσουμε με το όχι τόσο υπέροχο.
Το βρώμικο
Αυτή η έκδοση βασίζεται σε ένθετες 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λειτουργιών του Sass.
/// 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; )