less中解决CSS3的calc冲突问题

最近一直在用less，基本上还挺好用的。但使用CSS3的calc函数时却发现个冲突问题。

问题

.class {
  height: calc(100% - 50px);
}

谁知道less自己就把它当表达式计算掉了，导致到浏览器那变成了calc(50%) o(╯□╰)o

解决方法

解决方法也挺简单，加上~用""包起来。

.class {
  height: calc(~"100% - 50px");
}

可如果要用变量怎么用呢？也不复杂，像下面这样就搞定啦。

.class {
  @cap: 50px;
  height: calc(~"100% - @{cap}");
}