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

Less 和 CSS Calc() 属性：阻碍激进编译

Less 编译器，例如 OrangeBits 和 dotless，可能会尝试编译和评估CSS calc() 属性，导致不正确的结果。本文探讨了防止这种行为并维护所需 CSS 样式的方法。

Less 的默认行为

较少用于主动计算 calc() 中的表达式，从而导致错误的结果。例如，body { width: calc(100% - 250px - 1.5em); } 将被错误地翻译为 body { width: calc(-151.5%); }.

Less 的解决方案

执行以下操作：

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

通过使用 ~ 运算符，您可以向 Less 发出信号以忽略期间的表达式编译。

Less v3.00 和的解决方案稍后

默认情况下，Less 不再自动计算 calc() 中的表达式。因此，对于 Less v3.00 及更高版本，不需要采取任何特定操作来防止激进编译。

严格数学选项

在 Less 1.4.0 中，有一个strictMaths 选项，要求所有 Less 计算都括在括号中。此选项可确保 calc() 无需任何修改即可按预期工作。默认情况下，Less 1.4.0 的发布版本中此选项是关闭的。

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