Tim Tim - 9 days ago 5
CSS Question

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

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

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}