Sass/Scss - 用小数四舍五入答案

【问题标题】：Sass/Scss - Rounding down with decimal placesSass/Scss - 用小数四舍五入
【发布时间】：2015-07-06 05:19:57
【问题描述】：

我有以下 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 (sass 3.2)。

调整“精度”不起作用 - 最后一个值仍然是“7”。仅更改精度只会截断小数位数 - 它不会像我需要的那样将最后一个小数位四舍五入。

Codepen：http://codepen.io/calumbrodie/pen/aOzVga

编辑：谁将此标记为重复 - 这是一个不同的问题，另一个问题是关于“精度”，而我明确解释了为什么这与“精度”无关。我真的不能说得更清楚了。

【问题讨论】：

Rounding in Sass的可能重复
@cimmanon - 这不是重复的 - 请删除你的标志。接受的其他问题是关于“精度”的，我在最初的问题中解释说，这不仅仅是关于精度，而是关于对小数位执行“地板”运算。
我没有义务删除任何东西。仅仅因为接受的答案不符合您的要求，并不会使您的问题不重复。另一个答案确实回答了您的问题（并且更简单）。
否 - 其他问题的答案（更改精度）将导致值为 16.6667，这是错误的。很明显，您不了解精度和舍入策略之间的区别。而且我没有要求你做任何事情，我要求你礼貌地取下旗帜。请再读一遍我的问题——你没有抓住重点。

标签： responsive-design sass rounding subpixel libsass

【解决方案1】：

感谢以下要点，在发布后找到答案：

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);
}

【讨论】：

【解决方案2】：

使用 $sass-precision: x; 它会明确地告诉 sass 以小数位四舍五入。

【讨论】：

这不就是调整小数位数吗？