Numbri kinnitamine - CSS-trikid

Arvutiteaduses kasutame sõna klamber arvu piiramiseks kahe teise arvu vahel. Kinnitatuna hoiab number kas oma väärtust, kui elab kahe muu väärtuse kehtestatud vahemikus, võtab madalama väärtuse, kui see on esialgu väiksem, või suurema, kui see on algselt suurem.

Kiire näitena enne edasiminekut:

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

Tulles tagasi CSS-i juurde. On mitmeid viise, kus peate võib-olla numbrit kahe teise vahel piirama. Võtame näiteks opacityatribuudi: see peab olema ujuk (vahemikus 0 kuni 1). See on tavaliselt selline väärtus, mida soovite kinnitada, et veenduda, et see pole negatiivne ega suurem kui 1.

Klamberfunktsiooni saab Sassis rakendada kahel viisil, mõlemad rangelt samaväärsed, kuid üks on teisest palju elegantsem. Alustame mitte nii suurest.

Räpane

See versioon tugineb pesastatud iffunktsioonikõnedele. Põhimõtteliselt ütleme: kui $numberon madalam kui $min, siis hoia $min, muidu kui $numberon kõrgem kui $max, siis hoia $max, muidu hoia $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)); )

Kui te ei ole pesastatud kõnedega eriti kindel, mõelge eelmisele avaldusele järgmiselt:

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

Puhas

See versioon on palju elegantsem, kuna see kasutab nii Sassi mõlemaid minkui ka maxfunktsioone hästi.

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

Sõna otseses mõttes tähendab miinimumini jäämist $maxja maksimaalset vahemikku $numberja $min.

Näide

Nüüd loome demonstratsiooni huvides väikese läbipaistmatuse segu:

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