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已经提到的缺失单元。

在您举例的情况下，您可以先应用'移动'：

@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打开或关闭严格数学，在严格模式下，数学。

- strict-math = on | off需要括号。此选项可能默认为on然后                           将来会被删除。

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

2 个答案: