Skaitļa stiprināšana - CSS-triki

Datorzinātnēs mēs izmantojam vārdu clamp kā veidu, kā ierobežot skaitli starp diviem citiem skaitļiem. Piespraužot skaitli, vai nu saglabās savu vērtību, ja dzīvo divu citu vērtību noteiktajā diapazonā, ņem zemāko vērtību, ja sākotnēji ir zemāka, vai augstāko, ja sākotnēji ir lielāka par to.

Kā ātrs piemērs pirms došanās tālāk:

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

Atgriežoties pie CSS. Ir daži veidi, kā jums var būt nepieciešams ierobežot numuru starp diviem citiem. Piemēram, ņemiet opacityīpašumu: tam jābūt pludiņam (no 0 līdz 1). Parasti tā ir tāda veida vērtība, kuru vēlaties nospiest, lai pārliecinātos, ka tā nav ne negatīva, ne lielāka par 1.

Skavas funkciju var ieviest divos veidos, abi stingri līdzvērtīgi, tomēr viens ir daudz elegants nekā otrs. Sāksim ar ne tik lielisko.

Netīrais

Šī versija ir balstīta uz ligzdotiem iffunkciju izsaukumiem. Būtībā mēs sakām: ja $numberir zemāks par $min, tad paturiet $min, cits, ja $numberir augstāks par $max, tad paturiet $max, citādi paturiet $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)); )

Ja neesat ļoti pārliecināts par ligzdotajiem zvaniem, domājiet par iepriekšējo paziņojumu šādi:

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

Tīrais

Šī versija ir daudz elegants, jo tas padara labu izmanto gan minun maxfunkcijas no 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); )

Burtiski nozīmē saglabāt minimumu starp $maxun maksimumu starp $numberun $min.

Piemērs

Tagad izveidosim nelielu necaurredzamības maisījumu tikai demonstrācijas labad:

/// 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; )