我的LESS数学运算不适用于我的媒体查询定义 [英] 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;
}

编译为此:

@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?

推荐答案

就像calc()方法的CSS逻辑一样，媒体查询中的方程式(已经由一组括号封装了)也需要由多余的括号.这是行不通的:

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}

但这会:

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

这篇关于我的LESS数学运算不适用于我的媒体查询定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！