Bir Sayı Sıkıştırma - CSS Hileleri

Bilgisayar biliminde, bir sayıyı diğer iki sayı arasında sınırlamanın bir yolu olarak kelepçe kelimesini kullanırız. Kelepçelendiğinde, bir sayı ya diğer iki değer tarafından empoze edilen aralıkta yaşıyorsa kendi değerini korur, başlangıçta ondan düşükse düşük değeri veya başlangıçta ondan daha yüksekse daha yüksek olanı alır.

Daha ileri gitmeden önce hızlı bir örnek olarak:

$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'ye geri dönüyoruz. Bir numaranın diğer ikisi arasında sınırlandırılmasına ihtiyaç duyabileceğiniz birkaç yol vardır. Örneğin opacityözelliği ele alalım : bu bir kayan nokta olmalıdır (0 ile 1 arasında). Bu, genellikle ne negatif ne de 1'den yüksek olmadığından emin olmak için kelepçelemek isteyeceğiniz türden bir değerdir.

Sass'ta bir kenetleme işlevi uygulamak iki şekilde yapılabilir, her ikisi de tam olarak eşdeğerdir, ancak biri diğerinden çok daha zariftir. O kadar da harika olmayanla başlayalım.

Kirli olan

Bu sürüm, iç içe geçmiş ifişlev çağrılarına dayanır . Temel olarak diyoruz ki: eğer $numberdaha düşükse $min, o zaman tut $min, aksi takdirde $numberdaha yüksekse $max, o zaman tut $max, yoksa tut $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)); )

İç içe geçmiş çağrılardan pek emin değilseniz, önceki ifadeyi şu şekilde düşünün:

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

Temiz olan

İkisinden de iyi kullanan beri bu sürümü çok daha zarif minve maxSass gelen işlevler.

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

Kelimenin tam anlamıyla, minimum $maxve maksimum arasında $numberve arasında tutmak anlamına gelir $min.

Misal

Şimdi, gösteri olsun diye biraz opaklık karışımı oluşturalım:

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