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

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.

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

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

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?

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)) { }

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 ')'"

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