Question

如何在Adobe CQ5的@media查询中使用LESS变量？

myFile.less：

@myVar = 10px;
span {
    width: @myVar;
}

工作正常。

可是：

myFile.less：

@myVar = 400px;
@media all and (min-width: @myVar) {
   span{ 
       color:red;
   }
}

结果：

clientLib.css：

@media all and (min-width: @myVar) {
   span{ 
       color:red;
   }
}

Answer 1

自1.2.0版（两年前发布）以来，此代码完全有效：

@myVar: 400px;
@media all and (min-width: @myVar) {
   span { 
       color:red;
   }
}

所以假设@myVar = 400px;只是你的错字，看起来好像你没有更新你的CQ5一段时间。考虑将其升级到5.6.1，其中包括LESS v1.3.3（非常古老，但至少它支持媒体查询中的变量）。

我还怀疑可以通过用newer version替换“less.js”文件（在其他CQ文件中找到）来手动更新CQ附带的LESS脚本。

Answer 2

来自：http://flippinawesome.org/2013/05/20/less-tips-and-tricks/

/* note '~' in the beginning - media query must be escaped */
@singleQuery: ~"tablet and (min-width: 500px)";
@media screen, @singleQuery {
  set {
    padding: 3 3 3 3;
  }
}

-

@myVar: ~"400px";
@media all and (min-width: @myVar) {
   span{
       color:red;
   }
}

汇编为：

@media all and (min-width: 400px) {
  span {
    color: red;
  }
}

@media查询中的LESS变量很少

2 个答案: