css – 在媒体查询中使用LESS变量

前端之家收集整理的这篇文章主要介绍了css – 在媒体查询中使用LESS变量前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我输入以下较少的代码时:(将其粘贴到 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中是否有正式语法使我能够这样做?

如果没有 – 有解决方法吗?

解决方法

由于数学设置

默认情况下,LESS要求数学运算在括号内(strict-math = on).因此,您的变量需要围绕值进行正确计算,如下所示:

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

然后您的原始代码将按预期输出.

原文链接:https://www.f2er.com/css/217501.html

猜你在找的CSS相关文章