LESS CSS computation

Question

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

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

So that @bgsize == 50%, everything I've tried has cause the script to fail.

Answer 1

Actually, a more elegant way of doing this is just using the percentage() function which is built into LESS.

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

Perhaps this was added in a newer version of LESS.

Answer 2

AFAIK, expression result will always use the same units as its operands; appending percentage sign to the end will yield something like '50px %' at best or fail altogether.

That said, 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" indirection if you specify units in the actual property definition, too.