他们是否是一种更改四舍五入的数字的方法,我想停止将这样的数字四舍五入 2.0242914979757085% 到这个 2.024%。我想调整输出 css
没有任何额外函数的快速选择是将数字乘以 1000,然后四舍五入,然后除以 1000。
round($percent * 1000) / 1000;
从 SASS 更改日志:
现在可以使用 --precision
选项在命令行中设置 Sass 中数字的数值精度。此外,现在可以通过将 Sass::Script::Number.precision 设置为整数(默认为 3)来更改 Sass 输出中的默认精度位数。由于现在可以更改此值,因此 Sass::Script::Number 中的 PRECISION 常量已被弃用。万一你在代码中使用它,你现在应该改用 Sass::Script::Number.precision_factor。
这是在 SASS 3.1.8 中添加的。
以下函数,这是对铃木武创建的函数的略微改进:
@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
您还可以执行以下操作:
@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 );
}
严格来说,这不是您问题的答案,但如果您只想去除小数位,则不妨这样做:
font-size: round(12.5); /* => 12 */
它可能适用于不需要高精度级别的值,例如字体大小。
的舍入函数
@function round($value, $fractionDigits: 0) {
$power: math.pow(10, $fractionDigits);
@return math.div(math.round($power * $value), $power);
}
用法:
round(2.0242914979757085%, 3) // 2.024%
不要忘记添加sass:math
模块,如下所示:
@use "sass:math";
附言这是我使用的以下JS方法的sass端口:
export const round = (value, fractionDigits = 0) => {
const power = Math.pow(10, fractionDigits);
return Math.round(power * value) / power;
};
我们只需要使用floor(n*1000)/1000
您可以创建自己的自定义函数来执行此操作,例如
@function fn-truncate($value, $places) {
$radix: 10;
$num: 1;
$result : 0;
@for $i from 1 through $places {
$num: $num * $radix;
}
$result: math.div(math.floor($value * $num), $num);
@return $result;
}
输入:
@debug "fn-truncate(123.4999, 2) : #{fn-truncate(123.4999, 2)}";
@debug "fn-truncate(123.4999, 1) : #{fn-truncate(123.4999, 1)}";
@debug "fn-truncate(123.999, 2) : #{fn-truncate(123.999, 2)}";
@debug "fn-truncate(123.6999, 1) : #{fn-truncate(123.6999, 1)}";
@debug "fn-truncate(123.2, 3) : #{fn-truncate(123.2, 3)}";
@debug "fn-truncate(123.123456, 2) : #{fn-truncate(123.123456, 2)}";
@debug "fn-truncate(123, 2) : #{fn-truncate(123, 2)}";
@debug "fn-truncate(123.45, 3) : #{fn-truncate(123.45, 3)}";
输出
src/styles/_functions.scss:65 DEBUG: fn-truncate(123.4999, 2) : 123.49
src/styles/_functions.scss:66 DEBUG: fn-truncate(123.4999, 1) : 123.4
src/styles/_functions.scss:67 DEBUG: fn-truncate(123.999, 2) : 123.99
src/styles/_functions.scss:68 DEBUG: fn-truncate(123.6999, 1) : 123.6
src/styles/_functions.scss:69 DEBUG: fn-truncate(123.2, 3) : 123.2
src/styles/_functions.scss:70 DEBUG: fn-truncate(123.123456, 2) : 123.12
src/styles/_functions.scss:71 DEBUG: fn-truncate(123, 2) : 123
src/styles/_functions.scss:72 DEBUG: fn-truncate(123.45, 3) : 123.45
此外,您可以根据需要在 fn-truncate() 中添加更多的检查/句柄输入单元等,例如$places
不应该为 0 或您希望如何处理该用例,两者都$value
,$places
应该是使用 type-of($value) == 'number'
的数字以及您能想到的更多用例。
谢谢