使用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)")
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容