Correct LESS CSS computation syntax

Question

I have a variable that sets a percentage:

@var-a: 50%;

And another that is a fixed width:

@var-b: 100px;

I want to calculate @var-c as below:

@var-c: (@var-a * @var-b);

I expected 50px, but actually get 5000px. What am I doing wrong?

If you just want half of @var-b you should just have @var-a : 0.5, percentages are used in the context of the client page width. — Joan Charmant
– Joan Charmant, Commented Aug 24, 2013 at 18:22
@var-a is a height variable, so I would assume it needs to stay as a percentage? — alias51
– alias51, Commented Aug 25, 2013 at 11:01

Martin Turjak · Accepted Answer · 2013-08-25 14:52:41Z

1

Less calculations use the numbers regardless of the units. If you know that @var-a will be in percentages, you could just do something like this:

@var-c: unit(@var-a / 100 * @var-b, px);

using unit() allows you to control the output unit.

You can also use guards in addition to do something else if @var-a isn't a percentage.

answered Aug 25, 2013 at 14:52

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

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

1 Answer 1