css - Using LESS variables in media queries

Question

When I enter the following less code: (paste it into http://less2css.org)

@item-width: 120px;
@num-cols: 3;
@margins: 2 * 20px;
@layout-max-width: @num-cols * @item-width + @margins;

@media (min-width: @layout-max-width) {
    .list {
      width: @layout-max-width;
    }
}

... the resulting CSS is:

@media (min-width: 3 * 120px + 40px) {
  .list {
    width: 400px;
  }
}

Notice that the same variable @layout-max-width - in the media query it produces an expression (which isn't what I want) and when used as the value for the width property it produces 400px (which is also what I want for the media query.)

Is there formal syntax in LESS which enables me to do this?

If not - is there a workaround?

Answer 1

Due to Math Settings

LESS by default expects math operations to be in parenthesis (strict-math=on). So your variable needs those around the values to calculate correctly, like so:

@layout-max-width: (@num-cols * @item-width + @margins);

Then your original code will output as you expect.