Na ciência da computação, usamos a palavra braçadeira como forma de restringir um número entre dois outros números. Quando fixado, um número manterá seu próprio valor se estiver dentro da faixa imposta pelos outros dois valores, assumirá o valor mais baixo se inicialmente for menor do que ele ou o maior se for inicialmente maior do que ele.
Como um exemplo rápido antes de prosseguir:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Voltando ao CSS. Existem algumas maneiras em que você pode precisar que um número seja restrito entre dois outros. Considere a opacitypropriedade por exemplo: deve ser um float (entre 0 e 1). Esse é normalmente o tipo de valor que você gostaria de fixar para garantir que não seja negativo nem superior a 1.
A implementação de uma função de grampo no Sass pode ser feita de duas maneiras, ambas estritamente equivalentes, mas uma é muito mais elegante que a outra. Vamos começar com o não tão bom.
O sujo
Esta versão depende de ifchamadas de função aninhadas . Basicamente, dizemos: se $numberfor menor que $min, então mantenha $min, senão se $numberfor maior que $max, então mantenha $max, caso contrário, mantenha $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)); )Se você não está muito confiante com chamadas if aninhadas, pense na instrução anterior como:
@if $number $max ( @return $max; ) @return $number;O limpo
Esta versão é muito mais elegante, pois aproveita bem as funções mine maxfunções do 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); )Literalmente significa manter o mínimo entre $maxe o máximo entre $numbere $min.
Exemplo
Agora, vamos criar um pequeno mixin de opacidade apenas para fins de demonstração:
/// 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; )