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}");
}