Question

我试图以2位精度获得lesscss文件中的百分比。在lesscss文件中

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

编译宽度：30.580000000000002％; 我做错了什么？

我的逻辑很简单：
第1步：获取“不正确”数字30.580000000000002
步骤2：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);

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

但是，你不应该为此烦恼。

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百分比。

鉴于以下LESS输入：

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)非破坏性地实现了我们想要的目标。

较少的百分比无法正常工作

3 个答案: