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

Question

我想少用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 

将输出30像素

(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

出于某种原因，最简单和最明显的方法是在这里失踪（它实际上是Richard Testani的答案，但是在那里它会阻碍进一步的代码导致错误的方向）。所以...... 答案原文：

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

很简单，只要：

width: (480/1366*100%); 

说起 percentage

---

：

它也做了这个伎俩，但我个人从来没有使用它的冗长和不可读性。在快速扫描percentage(480/1366)就像peekabooze(480/1366)，所以你必须停下来盯着它才能得到线索。相反%在480/1366*100%（或480/1366 * 100%）中的显式外观使其更易于引人注目。