我有以下Sass规则:
$multiplier: 1/3*100;
.ratio_1x0-5{
padding-bottom: 0.5%*$multiplier;
}
它输出以下css:
.ratio_1x0-5{
padding-bottom: 16.6666666667%
}
相反,我需要这个规则如下(小数精度并不重要,只是最后一个值是6,而不是7),这是为了解决亚像素渲染问题。
.ratio_1x0-5{
padding-bottom: 16.6666%
}
如果我使用sass的"floor"函数,它会将整件事四舍五入到"16%"。有没有什么方法可以将Sass中的小数位数四舍五入到x?用一个mixin来做这个怎么样?我正在使用libsass(sass3.2)。
调整"精度"无效-最后一个值仍然是"7"。仅更改精度只会截断小数位数-它不会像我需要的那样将最后一个小数位数四舍五入。
代码笔:http://codepen.io/calumbrodie/pen/aOzVga
编辑:无论谁将其标记为重复-这是一个不同的问题,另一个问题是关于"精度",而我明确解释了为什么这与"精度"无关。我真的再清楚不过了。
由于以下Gist:,在发布后立即找到了答案
https://gist.github.com/terkel/4373420
@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;
}
@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;
}
}
然后按如下方式使用:
.ratio_1x0-5{
padding-bottom: decimal-round(0.5%*$multiplier, 5, floor);
}
使用$sass精度:x;它会明确地告诉sass,按照小数位数四舍五入到什么位置。