How to convert a numeric value to a percentage (or) add a percent symbol to a number?

Question

I am trying to use LESS css to do the following:

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

The problem is that the output will be as follows:

 width: 35.13909224011713 '%'; 

How to make it work? i.e:.

 width: 35.13909224011713%; 

Answer 1

You can use the interpolation string :

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

This will lead to the conclusion

 width: 35.13909224011713%; 

Alternatively, if you want it to be rounded, you can use round() .

Answer 2

Despite the fact that this question is quite old, I want to add some more examples of adding. Less will set your units to what works.

 10px + 20px 

output 30px

 (20/200) * 100% 

displays 10%

So, with units that you do not need to concatenate the unit measurement.

I found that adding 0 helps when you don't know what a unit value is.

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

The above class will have a width of 20%. If we added with px, it would be 20px.

Answer 3

For some reason, the least verbose and most obvious method seems to be absent here (it actually answers Richard Testani, but there he is disturbed by further code leading to the wrong direction). So ... Reply to the original:

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

as simple as:

 width: (480/1366*100%); 

---

Speaking of percentage :

he also does the trick, but personally I will never use it for his verbosity and unreadability. With a quick scan, percentage(480/1366) reads exactly like peekabooze(480/1366) , so you need to stop and look at it to get a hint. In contrast to the explicit appearance of % in 480/1366*100% (or 480 / 1366 * 100% ), this becomes more noticeable.