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