less中解决CSS3的calc冲突问题

时间 2019-11-07

标签解决 css3 css calc 冲突问题栏目 CSS 繁體版

原文原文链接

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

问题

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

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

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

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

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

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