在 Sass 中舍入数字并调整小数位数答案

【问题标题】：Rounding numbers in Sass and adjusting the amount of decimals在 Sass 中舍入数字并调整小数位数
【发布时间】：2022-04-12 22:45:19
【问题描述】：

是他们在 sass 中更改舍入发生的数字的一种方式，我想停止将 2.0242914979757085% 这样的数字舍入到 2.024%。我想调整输出css中的小数位数

【问题讨论】：

标签： css math sass numbers rounding

【解决方案1】：

没有任何额外功能的快速选择是将数字乘以 1000，然后四舍五入，然后除以 1000。

round($percent * 1000) / 1000;

【讨论】：

真的很干净！谢谢

【解决方案2】：

来自 SASS 更改日志：

现在可以使用命令行的--precision 选项设置 Sass 中数字的数值精度。此外，现在可以通过将 Sass::Script::Number.precision 设置为整数（默认为 3）来更改 Sass 输出中的默认精度位数。由于现在可以更改此值，因此不推荐使用 Sass::Script::Number 中的 PRECISION 常量。万一您在代码中使用它，您现在应该改用 Sass::Script::Number.precision_factor。

这是在 SASS 3.1.8 中添加的。

【讨论】：

我认为我措辞错误我想保留 2.024291，但 sass 一直将其四舍五入到 2.024，我想停止它
sass --precision 6 input.scss output.css 应该可以解决问题。
所以 Sass 中的精度是关于更精确地处理 CSS 值？

【解决方案3】：

您可以使用以下功能，这是对function created by Takeru Suzuki的轻微改进：

@function decimal-round ($number, $digits: 0, $mode: round) {
    $n: 1;
    // $number must be a number
    @if type-of($number) != number {
        @warn '#{ $number } is not a number.';
        @return $number;
    }
    // $digits must be a unitless number
    @if type-of($digits) != number {
        @warn '#{ $digits } is not a number.';
        @return $number;
    } @else if not unitless($digits) {
        @warn '#{ $digits } has a unit.';
        @return $number;
    }
    @if $digits > 0 {
        @for $i from 1 through $digits {
            $n: $n * 10;
        }
    }
    @if $mode == round {
        @return round($number * $n) / $n;
    } @else if $mode == ceil {
        @return ceil($number * $n) / $n;
    } @else if $mode == floor {
        @return floor($number * $n) / $n;
    } @else {
        @warn '#{ $mode } is undefined keyword.';
        @return $number;
    }
}

输出：

decimal-round(0.333)    => 0
decimal-round(0.333, 1) => 0.3
decimal-round(0.333, 2) => 0.33
decimal-round(0.666)    => 1
decimal-round(0.666, 1) => 0.7
decimal-round(0.666, 2) => 0.67

【讨论】：

【解决方案4】：

您还可以执行以下操作：

@function ceilHundredths($numbers) {
    $numbers: $numbers * 10000;

    @if ($numbers < 1) {
        $numbers: $numbers - 1;

    } @else {
        $numbers: $numbers + 1;
    }

    @return round($numbers)/ 100#{"%"};

}

.test--regular {
    margin-left: percentage( -1 / 3 );
}

.test {
    margin-left: ceilHundredths( -1 / 3 );
}

.test--regular--2 {
    margin-left: percentage( 1 / 3 );
}

.test--2 {
    margin-left: ceilHundredths( 1 / 3 );
}

【讨论】：

【解决方案5】：

严格来说，这不是您问题的答案，但如果您只想去除小数位，您不妨这样做：

font-size: round(12.5); /* => 12 */

它可能适用于不需要高精度的值，例如字体大小。

【讨论】：