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

就像calc()方法的CSS逻辑一样，媒体查询中的方程式（已经由一组括号括起来）需要用一组额外的括号进行封装。这不起作用：

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

但这会：

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

我的LESS数学运算在我的媒体查询定义中不起作用

1 个答案: