使用 LESS 设置单个变量的最小和最大断点？

Question

我正在尝试使用 LESS 设置一个媒体查询断点，这样我就可以得到这样的东西：

@media (max-width: 1000px) {
  // something
}
@media (min-width: 1001px) {
  // something
}

我想要一个单独的地方来控制断点。以下不工作。这只是一个语法问题还是我以错误的方式解决这个问题？

@breakpoint: 1000;

@breakpoint-max: @breakpoint;
@breakpoint-min: @breakpoint + 1;

@media (max-width: @breakpoint-max) {
  // something
}
@media (min-width: @breakpoint-min) {
  // something
}

Answer 1

您从未指定单位。

您需要将变量设置为 1000px。

Answer 2

我不确定为什么要尝试编译的媒体查询不起作用，除了@SLaks 已经提到的缺失单元。

在您的示例情况下，您可以申请 'mobile first':

@breakpoint: 1000px;

@breakpoint-max: @breakpoint;
@breakpoint-min: (@breakpoint + 1);

//something
p {
color:red;
@media (min-width: @breakpoint-min) {
  // something
  color:green;
}
}

以上默认编译成如下代码：

p {
  color: red;
}
@media (min-width: 1001px) {
  p {
    color: green;
  }
}

除非屏幕宽度超过 1000 像素，否则颜色始终为红色。还要注意 @breakpoint-min: (@breakpoint + 1); 中的括号。这种情况下括号的要求取决于 sm 选项：

-sm=on|off Turns on or off strict math, where in strict mode, math.

--strict-math=on|off Requires brackets. This option may default to on and then be removed in the future.

使用 LESS 设置单个变量的最小和最大断点？

Set min and max breakpoints with single variable with LESS?

less