在媒体查询中使用LESS变量 [英] Using LESS variables in media queries

问题描述

当我输入以下代码时：（将其粘贴到 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;请注意，同一个变量 
} 
} 
    - 在媒体查询中它生成一个表达式（这不是我想要的），当用作宽度属性的值，它产生400px（这也是我的）
 
 
 
在LESS中是否有正式语法可以让我这样做？
 
 
 
 
解决方案
 
由于数学设置
 
 
 
 LESS默认情况下期望数学运算在括号中（ strict-math = on ）。所以你的变量需要那些值周围的值来正确计算，如下：
  @ layout-max-width： cols * @ item-width + @margins）; 
  
然后您的原始代码将按预期输出。
 
When I enter the following less code: (paste it into 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;
    }
}
... the resulting CSS is:
@media (min-width: 3 * 120px + 40px) {
  .list {
    width: 400px;
  }
}
Notice that the same variable @layout-max-width - in the media query it produces an expression (which isn't what I want) and when used as the value for the width property it produces 400px (which is also what I want for the media query.)

Is there formal syntax in LESS which enables me to do this?

If not - is there a workaround?
解决方案
Due to Math Settings

LESS by default expects math operations to be in parenthesis (strict-math=on). So your variable needs those around the values to calculate correctly, like so:
@layout-max-width: (@num-cols * @item-width + @margins);
Then your original code will output as you expect.

                        
这篇关于在媒体查询中使用LESS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！