不正确工作的百分比较小

Question

我正在尝试以2位数的精度获取文件中的百分比。在lesscss文件中

@w: round(((100-((12-5)*3.8))/(12/5))*100);
width: percentage(@w/10000);

编译为宽度: 30.580000000000002%；我哪里做错了？

我的逻辑很简单：

步骤1:获取“不正确”数字30.580000000000002

第二步: 30.580000000000002*100 = 3058.0000000000002

第3步:舍入(3058.0000000000002)= 3058

步骤4: 3058/10000 = 0.3058

第5步:百分比(0.3058)=30.58%

Answer 1

您没有考虑到浮点计算是用二进制完成的，在二进制中没有1/10000的精确表示。因此：

/* 30.580000000000002 */
console.log(Math.round(((100 - ((12 - 5) * 3.8))/(12 / 5)) * 100) / 10000 * 100);

(如果LESS使用像JavaScript这样的ECMAScript实现，只要计算是基于IEEE-754的双精度浮点数，这并不重要。)

但是，您不应该为此而烦恼。

width: 30.580000000000002%;

是perfectly Valid CSS。

Answer 2

您需要将您的round()方法包装在percentage()方法周围，如下所示：

@w: round(((100-((12-5)*3.8))/(12/5))*100);
width: round(percentage(@w/10000));

Answer 3

在尝试最小化数据流量时，您的问题可能很重要。如今，it does not make sense在mantissa中通过网络发送多个数字的CSS百分比。

给定以下较少的输入：

w: 100 %;
w: round(512 * 1%, 2);
w: 2.0 / 3.0 * 100 * 1%;
w: round(2.0 / 3.0 * 100 * 1%, 2);
w: round(0.19%, 2);
w: round(0.19%, 1);
w: round(10000%, 1);
w: round(10000, 1);

和相应的输出：

w: 100 %;
w: 512%;
w: 66.66666666666666%;
w: 66.67%;
w: 0.19%;
w: 0.2%;
w: 10000%;
w: 10000;

我们看到round(percentage, 2)以非破坏性的方式实现了我们想要的功能。