将Less.js变量传递给媒体查询

Question

我想将此变量传递给媒体查询：

@browser-main-and-sidebar: @main-width + @main-spacer + @sidebar-width + @outer-padding*2;

其中：

@outer-padding: 20px;
@main-width: 600px;
@main-spacer: 10px;
@sidebar-width: 290px;

当我写出来的时候：

@media (min-width: @browser-main-and-sidebar) {
    max-width: @browser-main-and-sidebar;
}

生成的CSS是：

@media (min-width: 600px + 10px + 290px + 20px*2) {
    .Jobzi__core {
        max-width:1240px;
        background: black
    }
}

有没有办法强制将变量编译成单个像素值？

Answer 1

如上面评论中所述的seven-phases-max，@media次查询中隐含了严格的数学。

  

LESS - Strict Math

     

通过严格的数学运算，只会处理不必要的括号内的数学。

因此，您需要在括号内包装要评估的变量：

@browser-main-and-sidebar: (@main-width + @main-spacer + @sidebar-width + @outer-padding * 2);

..或：

@media (min-width: (@browser-main-and-sidebar)) {
    max-width: @browser-main-and-sidebar;
}

两者都将编译为所需的结果：

@media (min-width: 940px) {
  max-width: 940px;
}

---

@outer-padding: 20px;
@main-width: 600px;
@main-spacer: 10px;
@sidebar-width: 290px;
@browser-main-and-sidebar: @main-width + @main-spacer + @sidebar-width + @outer-padding * 2;

@media (min-width: (@browser-main-and-sidebar)) {
    max-width: @browser-main-and-sidebar;
}