Dalam sains komputer, kita menggunakan kata penjepit sebagai cara untuk menyekat nombor antara dua nombor lain. Apabila dijepit, nombor akan menyimpan nilainya sendiri jika tinggal dalam julat yang dikenakan oleh dua nilai lain, mengambil nilai yang lebih rendah jika awalnya lebih rendah daripada itu, atau yang lebih tinggi jika awalnya lebih tinggi daripadanya.
Sebagai contoh cepat sebelum melangkah lebih jauh:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Kembali ke CSS. Terdapat beberapa cara di mana anda mungkin memerlukan nombor untuk dibatasi antara dua yang lain. Ambil opacityharta tanah misalnya: ia mestilah terapung (antara 0 dan 1). Ini biasanya merupakan jenis nilai yang ingin anda tekan untuk memastikan ia tidak negatif atau lebih tinggi daripada 1.
Melaksanakan fungsi penjepit di Sass boleh dilakukan dengan dua cara, kedua-duanya setara namun satu jauh lebih elegan daripada yang lain. Mari mulakan dengan yang tidak begitu hebat.
Yang kotor
Versi ini bergantung pada ifpanggilan fungsi bersarang . Pada dasarnya kita katakan: jika $numberlebih rendah daripada $min, maka simpan $min, jika $numbertidak lebih tinggi daripada $max, maka simpan $max, lain tetap $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)); )Sekiranya anda tidak begitu yakin dengan bersarang jika panggilan, fikirkan pernyataan sebelumnya sebagai:
@if $number $max ( @return $max; ) @return $number;Yang bersih
Versi ini jauh lebih elegan kerana ia menggunakan kedua-duanya mindan maxfungsi dari 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); )Secara harfiah bermaksud mengekalkan minimum antara $maxdan maksimum antara $numberdan $min.
Contohnya
Sekarang, mari buat sedikit campuran opacity hanya untuk demonstrasi:
/// 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; )