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

[papandreou]

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.

[lukeapage]

ah, a bit of a edge case.. we force strict maths on in media queries so that people can use fractions, thanks for raising the issue.

[clayzermk1]

:+1: 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;
  }
}

[andrewnicols]

We're also affected by this in Moodle as this issue affects the stock version 2.3 of bootstrap.

In this case the variable is assigned (https://github.com/twbs/bootstrap/blob/v2.3.2/less/variables.less#L181):

@navbarCollapseWidth:             979px;
@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;

The media-query is (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181):

@media (min-width: @navbarCollapseDesktopWidth) {
}

This leads to an output of:

@media (min-width: 979px + 1) {
}

https://tracker.moodle.org/browse/MDL-53152

[es6Test]

I tried doing something like

@media (min-width: @navbarCollapseWidth + 1) { }

so as to avoid creating the extra less variable, but this doesn't work, any ideas why?

[seven-phases-max]

so as to avoid creating the extra less variable, but this doesn't work, any ideas why?

Currently parens are required for arithmetic expressions in @media statements, e.g.:

@media (min-width: (@navbarCollapseWidth + 1)) { }

[es6Test]

I get an error for

@media (max-width: (@sm -1)) {
  .hidden-sm-down{  // hide anything up to small size
    display: none;
  }
} 

Error loading "app/styles/index.less!$less" from "app/app" at http://localhost:63342/foo/app/app.js Expected ')'"

[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).