如何防止 Less 错误编译 CSS `calc()` 属性？

防止 CSS calc() 属性的 Less 编译

Less 编译器在尝试编译使用 calc() 定义的 CSS 属性时经常遇到问题功能。例如，输入：

body { width: calc(100% - 250px - 1.5em); }

可能会意外地翻译为：

body { width: calc(-151.5%); }

这种不准确的转换可能会导致不良结果。

更少的解决方案

3.00及以上版本不再评估默认情况下，calc() 中的表达式。因此，提供的输入在编译过程中不会改变。

对于 3.00 之前的 Less 版本，您可以使用 ~ 运算符来转义计算：

body { width: calc(~"100% - 250px - 1.5em"); }

严格数学选项在Less

Less版本1.4.0中引入了strictMaths选项。启用此选项后，所有 Less 计算都必须括在括号内。在这种情况下，将尊重 calc() 中的计算，并且在编译期间不会对其进行评估。请注意，此选项可能会破坏现有代码，因此应谨慎使用。

以上是如何防止 Less 错误编译 CSS `calc()` 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！