less中解决CSS3的calc冲突问题

BetaRabbit

最近一直在用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}");
}
阅读 15.9k

笨兔子
记录些随想、问题解决方法和平时学习的总结

全栈,猫奴

1.4k 声望
22 粉丝
0 条评论

全栈,猫奴

1.4k 声望
22 粉丝
文章目录
宣传栏