1. 首页
  2. css

CSS钳制数字

在计算机科学中,我们用\”钳制\”这个词来限制一个数在另外两个数之间。当钳制时,如果一个数字位于其他两个值的范围内,它将保持自己的值,如果初始值低于它,则取较低的值;如果初始值高于它,则取较高的值。
作为快速示例,然后再进一步:
$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。有几种方法可以将一个数字限制在另外两个数字之间。以opacity属性为例:它必须是一个float(介于0和1之间)。这通常是您希望钳制的值,以确保它既不为负也不高于1。
在Sass中实现钳制函数可以通过两种方式来实现,两种方式都是严格等价的,但是一种方式比另一种方式要优雅得多。让我们从不太好的一个开始。脏的一个
这个版本依赖于嵌套的if函数调用。基本上我们说:如果$number低于$min,则保持$min,否则如果$number高于$max,则保持$max,否则保持$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));}
如果您对嵌套if调用不是很有信心,把前面的语句想象成:
@if $number $max {@return $max;}@return $number;干净的那一个
这个版本更加优雅,因为它很好地利用了Sass的min和max函数。
/// 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);}
字面意思是保持最小值在$max之间,最大值在$number和***之间$min.示例
现在,让我们创建一个小的不透明度mixin只是为了演示:
///opacity mixin///@param{Float}$value-opacity value//@output`opacity`@mixin opacity($value){$climped value:clamp($value,0,1);@如果$value>

CSS钳制数字 为WP2原创文章,链接:https://www.wp2.cn/css/css%e9%92%b3%e5%88%b6%e6%95%b0%e5%ad%97/