使用Less,CSS3 calc()无法正常工作

Question

当我calc(100% + 20px)在Chromes和Firefox的Inspector中直接使用它时,它可以正常工作,如图所示.

但是当我将它插入到我的less文件中时,它会被转换为120%.我究竟做错了什么？

Answer 1

Less将尝试处理所有数学,包括100% + 20px.

您可以设置严格数学:

lessc -sm=on
lessc --strict-math=on

或者使用波浪符号引用 ~"100% + 20px"以防止语句被Less处理.

例如:

.class {
    padding-left: calc(~"100% + 20px");
}