Kẹp số - Thủ thuật CSS

Trong khoa học máy tính, chúng tôi sử dụng từ kẹp như một cách để hạn chế một số giữa hai số khác. Khi bị kẹp lại, một số sẽ giữ giá trị của chính nó nếu sống trong phạm vi áp đặt bởi hai giá trị khác, lấy giá trị thấp hơn nếu ban đầu thấp hơn nó hoặc giá trị cao hơn nếu ban đầu cao hơn nó.

Ví dụ nhanh trước khi đi xa hơn:

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

Quay lại với CSS. Có một số cách mà bạn có thể cần giới hạn một số giữa hai số khác. Lấy opacityví dụ về thuộc tính: nó phải là một float (từ 0 đến 1). Đây thường là loại giá trị bạn muốn kẹp để đảm bảo rằng nó không âm hoặc không cao hơn 1.

Thực hiện một chức năng kẹp trong Sass có thể được thực hiện theo hai cách, cả hai cách đều tương đương nhau nhưng một cách thanh lịch hơn nhiều so với cách kia. Hãy bắt đầu với cái không quá tuyệt vời.

Cái bẩn thỉu

Phiên bản này dựa trên các iflệnh gọi hàm lồng nhau . Về cơ bản, chúng tôi nói: nếu $numberthấp hơn $min, thì giữ $min, khác nếu $numbercao hơn $maxthì giữ $max, khác giữ $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)); )

Nếu bạn không tự tin lắm với các lệnh if lồng nhau, hãy nghĩ đến câu lệnh trước đó là:

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

Cái sạch

Phiên bản này thanh lịch hơn nhiều vì nó sử dụng tốt cả hai minvà các maxchức năng từ 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); )

Nghĩa đen có nghĩa là giữ mức tối thiểu giữa $maxvà tối đa giữa $numbervà $min.

Thí dụ

Bây giờ, hãy tạo một hỗn hợp opacity nhỏ chỉ để trình diễn:

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