在媒体查询中使用 LESS 变量答案

【问题标题】：Using LESS variables in media queries在媒体查询中使用 LESS 变量
【发布时间】：2014-02-13 06:55:48
【问题描述】：

当我输入以下更少的代码时：（将其粘贴到http://less2css.org）

@item-width: 120px;
@num-cols: 3;
@margins: 2 * 20px;
@layout-max-width: @num-cols * @item-width + @margins;

@media (min-width: @layout-max-width) {
    .list {
      width: @layout-max-width;
    }
}

...生成的 CSS 是：

@media (min-width: 3 * 120px + 40px) {
  .list {
    width: 400px;
  }
}

请注意，相同的变量@layout-max-width - 在媒体查询中它会产生一个表达式（这不是我想要的），当用作 width 属性的值时，它会产生 400px（这也是我想要的媒体查询。）

LESS 中是否有正式的语法使我能够做到这一点？

如果没有 - 是否有解决方法？

【问题讨论】：

标签： css less

【解决方案1】：

由于数学设置

默认情况下，LESS 期望数学运算在括号中 (strict-math=on)。因此，您的变量需要值周围的值才能正确计算，如下所示：

@layout-max-width: (@num-cols * @item-width + @margins);

那么你的原始代码就会如你所愿地输出。

【讨论】：