将数字固定到 N 位

Avatar of Kitty Giraudel
Kitty Giraudel

在 JavaScript 或任何其他编程语言中处理数字时,有一种方法可以截断数字在 n 位之后。不幸的是,Sass 中没有这样的函数。尽管如此,在处理基于百分比的网格系统时,舍入和精度问题确实会发生。

这是一个 toFixed() 的 Sass 实现

/// toFixed() function in Sass
/// @author Kitty Giraudel
/// @param {Number} $float - Number to format
/// @param {Number} $digits [2] - Number of digits to leave
/// @return {Number}
@function to-fixed($float, $digits: 2) {
  $sass-precision: 5;
  
  @if $digits > $sass-precision {
    @warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
    + "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
    + "See https://github.com/sass/sass/issues/1122 for further informations.";
  }
  
  $pow: pow(10, $digits);
  @return round($float * $pow) / $pow;
}

请注意,Sass 的默认精度为 5 位,到目前为止无法配置它。因此,无论给定函数作为 $digits 的数字是多少,Sass 都无法计算超过 5 位的数字。

此外,此函数需要一个 pow 函数,该函数不是 Sass 原生的(尚未)。它存在于 Compass 中,但是如果您不使用 Compass 或任何其他提供它的库,您可能需要自己的 pow 函数。幸运的是,它很容易实现

/// Power function
/// @param {Number} $x
/// @param {Number} $n
/// @return {Number}
@function pow($x, $n) {
  $ret: 1;
    
  @if $n >= 0 {
    @for $i from 1 through $n {
      $ret: $ret * $x;
    } 
  } @else {
    @for $i from $n to 0 {
      $ret: $ret / $x;
    }
  }
  
  @return $ret;
}