My LESS math operations aren't working in my media query definitions

Question

I'm trying to make the breakpoints of a layout a less-variable so I could easily check out multiple ideas but this:

@breakpoint: 500px;

@media all and (min-width: @breakpoint){
  #someid{
    height: 4321px;
  }
}
@media all and (min-width: @breakpoint + 1){
  #someid{
    height: 1234px;
  }
}
#someid{
  height: @breakpoint + 1;
}

compiles to this:

@media all and (min-width: 500px) {
  #someid {
    height: 4321px;
  }
}
@media all and (min-width: 500px + 1) { /*THE PROBLEM*/
  #someid {
    height: 1234px;
  }
}
#someid {
  height: 501px;
}

Calculations on variables wont happen in a media query, or at least not in the way that I'd expect. Is there a workaround for this behaviour? Also is it a bug, and should I file it?

Answer 1

Just like the CSS logic for the calc() method, equations within media queries (which are already encapsulated by a set of parentheses) need to be encapsulated by an extra set of parentheses. This won't work:

(min-width: 500px + 1) {CSS goes here}

But this will:

(min-width: (500px + 1px)) {CSS goes here}