将 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

正如上面评论中所述，@media 查询中隐含了严格的数学运算。

LESS - Strict Math

With strict math on, only maths that is inside un-necessary parenthesis will be processed.

因此您需要将要计算的变量括在括号内：

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

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

Pass Less.js variable into media query

css

less