Media queries: parentheses needed even without --strict-math=on

This example produces different output under less 1.3.3 and 1.4.2:

.foo (@dpr) {
    @dpi: @dpr * 96dpi;
    @query: ~'(min-resolution: @{dpi})';
    @media @query {
    }
}
.foo(2);

Output with less 1.3.3:

@media (min-resolution: 192dpi) {

}

Output with less 1.4.1:

@media (min-resolution: 2 * 96dpi) {

}

Adding parentheses around @dpr * 96dpi makes less 1.4.1 output the same as 1.3.3, but this was an unexpected gotcha with the upgrade to 1.4.x.

[clayzermk1]

👍 Also seeing this on less 2.5.1. The suggested workaround of putting parenthesis around the variable in the media query works.

Trivial problem case:

@foo: 10px;
@bar: 20px;
@baz: @foo + @bar;

.test {
  @media (min-width: @baz) {
    color: red;
  }
}

Compiled CSS of trivial problem case (invalid):

@media (min-width: 10px + 20px) {
  .test {
    color: red;
  }
}

Trivial problem case with workaround:

@foo: 10px;
@bar: 20px;
@baz: @foo + @bar;

.test {
  @media (min-width: (@baz)) {
    color: red;
  }
}

Compiled CSS of trivial problem case with workaround:

@media (min-width: 30px) {
  .test {
    color: red;
  }
}

[seven-phases-max]

I get an error for

You’re mixin up @sm -1 and @sm - 1 (the first one is not an arithmetic expression but a two value list).