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?
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:But this will: