Мои математические операции LESS не работают в моих определениях медиазапроса

Question

Я пытаюсь сделать точки останова макета менее переменными, чтобы я мог легко проверить несколько идей, но это:

@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;
}

компилируется в это:

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

Вычисления по переменным не будут происходить в медиа-запросе или, по крайней мере, не так, как я ожидал. Есть ли способ обойти это поведение? Также это ошибка, и я должен подать это?

Answer 1

Так же, как логика CSS для calc() метод, уравнения в медиа-запросах (которые уже заключены в набор скобок) должны быть заключены в дополнительный набор скобок. Это не сработает:

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

Но это будет:

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