DEATH CSS calculation

Question

Here is what I would like to do. Not sure if this is possible with LESS CSS , but I have a feeling that I just can't find the syntax.

@height : 50px; @wrap : 25px; @bgsize : ((@wrap/@height)*100)+'%'; 

So, @bgsize == 50% , everything I tried causes a script error.

Answer 1

AFAIK, the result of the expression will always use the same units as its operands; adding a percentage sign to the end will give something like "50px%" at best or not work at all.

However, you can do the following (which is not very elegant, but works):

 @height-in-pixels: 50; @wrap-in-pixels: 25; @bgsize: @wrap-in-pixels / @height-in-pixels * 100%; @height: @height-in-pixels + 'px'; @wrap: @wrap-in-pixels + 'px'; 

You can always avoid the last two lines and "-in-pixels" if you also specify units in the definition of the actual property.

Answer 2

In fact, a more elegant way to do this is to simply use the percentage() function, which is built into LESS.

 @height : 50px; @wrap : 25px; @bgsize : percentage(@wrap/@height); // @bgsize == 50% 

Perhaps this has been added to a newer version of LESS.