Dalam ilmu komputer, kami menggunakan kata penjepit sebagai cara untuk membatasi angka di antara dua angka lainnya. Saat dijepit, sebuah angka akan menyimpan nilainya sendiri jika hidup dalam kisaran yang ditentukan oleh dua nilai lainnya, mengambil nilai yang lebih rendah jika awalnya lebih rendah dari itu, atau lebih tinggi jika awalnya lebih tinggi darinya.
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. Ada beberapa cara di mana Anda mungkin memerlukan sebuah nomor untuk dibatasi di antara dua lainnya. Ambil opacityproperti sebagai contoh: itu harus berupa float (antara 0 dan 1). Ini biasanya jenis nilai yang ingin Anda jepit untuk memastikan nilainya tidak negatif atau lebih tinggi dari 1.
Menerapkan fungsi penjepit di Sass dapat dilakukan dengan dua cara, keduanya benar-benar setara namun yang satu jauh lebih elegan daripada yang lain. Mari kita mulai dengan yang tidak terlalu bagus.
Yang kotor
Versi ini bergantung pada ifpemanggilan fungsi bertingkat . Pada dasarnya kita katakan: jika $numberlebih rendah dari $min, maka simpan $min, else if $numberlebih tinggi dari $max, maka simpan $max, else simpan $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)); )Jika Anda tidak terlalu yakin dengan panggilan if bersarang, pikirkan pernyataan sebelumnya sebagai:
@if $number $max ( @return $max; ) @return $number;Yang bersih
Versi ini jauh lebih elegan karena memanfaatkan keduanya dengan baik 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 berarti menjaga minimum antara $maxdan maksimum antara $numberdan $min.
Contoh
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; )