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.

Whoever down voted me. Care to elaborate?

Fresheyeball
– Fresheyeball

2011-12-04 02:05:34 +00:00
Commented Dec 4, 2011 at 2:05 — Fresheyeball
– Fresheyeball, Commented Dec 4, 2011 at 2:05

fletom · Accepted Answer · 2012-01-23 01:11:17Z

8

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.

answered Jan 23, 2012 at 1:11

fletom

2,03814 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fresheyeball Over a year ago

I really like this method and will use it in the future, but I am going to leave the green check where it was because ChssPly76 really explained to me why my method was failing, and was much more timely. Your method really is cool though, thanks! You get my upvote.

fletom Over a year ago

Yes, this was meant as sort of an addendum to the above answer. I didn't explain why only because ChssPly76 already had.

fletom Over a year ago

I don't care about the points or whatever, but shouldn't the more up to date answer show up at the top? Feel free to either edit mine to add the explanation, or edit ChssPly76's to use the more up to date technique. I don't mind either way.

ChssPly76 · Accepted Answer · 2011-12-04 02:12:32Z

3

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.

answered Dec 4, 2011 at 2:12

ChssPly76

101k25 gold badges210 silver badges196 bronze badges

Collectives™ on Stack Overflow

LESS CSS computation

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related