使用Less时calc计算错误的问题

在设计界面样式的时候,在less文件中使用了csscalc运算,但是发现得到的结果并不理想

#less
 width: calc(100% - 40px);

理论上想得到的结果是:宽100%减去40个像素,实际计算得到的结果是:60%宽度

出错原因:

less自带的-运算符不会计算两个单位不同的公式,会默认将后面的单位转换成第一个被减元素的单位,所以就变成了100% - 40%得到的结果是 60%

解决办法:

  • ~ 转移运算符,阻止被 less 编译
 width: calc(~"100% - 40px");
  • less 内置函数e()
 width: e("calc(100% - 40px)")

你可能感兴趣的:(使用Less时calc计算错误的问题)