如何将数值转换为百分比（或）附加百分比符号到数字？

Question

我正在尝试使用LESS css执行以下操作：

width: ((480/1366)*100)+'%';

但问题是输出变为：

width: 35.13909224011713 '%';

如何使其可行？即：

width: 35.13909224011713%;

Answer 1

可以使用string interpolation：

@myvar: ((480/1366)*100);
width: ~"@{myvar}%";

那将输出

width: 35.13909224011713%;

此外，如果您希望对其进行舍入，则可以使用round()。

Answer 2

即使这个问题很老，我还想补充一些关于添加的例子。少将您的单位设置为正在进行的任何操作。

10px + 20px

将输出30px

(20/200) * 100%

将输出 10％

因此，对于单位，您不需要连接单位测量。

我发现当你不知道单位价值是多少时，添加0会有所帮助。

.mixin(@x, @y){
    @result: (@x / @y) * 100;
}

.my_class {
    .mixin(20, 100);
    width: @result + 0%; // you can use any unit here
}

上述类的宽度为20％。如果我们添加了px，它将是20px。

Answer 3

出于某种原因，最简单和最明显的方法在这里有点缺失（理查德·泰纳尼实际上回答了这个问题，但是由于进一步的代码导致错误的方向，它受到了阻碍）。所以... 答案原文：

width: ((480/1366)*100)+'%';

就像：

一样简单

width: (480/1366*100%);

---

说到percentage：

  

它也可以解决问题，但我个人并不是因为它的冗长和不可读性而使用它。快速扫描percentage(480/1366)读取就像peekabooze(480/1366)一样，所以你必须停下来盯着它才能得到线索。与%（或480/1366*100%）中480 / 1366 * 100%的显式外观相反，使其更容易引人注目。