如何防止 LESS CSS 修改 `calc()` 表达式？

克服 LESS CSS Calc() 编译问题

在尝试在 LESS 代码中使用 calc() 时，开发人员可能会遇到以下问题： LESS 编译器改变计算，导致不正确的输出。例如，以下代码：

width: calc(100% - 200px);

呈现为：

width: calc(-100%);

要解决此问题，可以在 LESS 中使用转义字符串。这种方法允许将 calc() 表达式视为字符串，从而防止编译器对其进行操作。

width: ~"calc(100% - 200px)";

这可以确保最终输出与原始代码保持一致。此外，可以将 Less 数学与转义字符串结合起来，如下所示：

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

这将编译为：

width: calc(100% - 15rem + 15px + 2em);

Less 默认情况下用空格连接值，从而启用转义字符串和计算结果的无缝集成。实现此技术可以有效地禁用 LESS 对 calc() 表达式的覆盖。

以上是如何防止 LESS CSS 修改 `calc()` 表达式？的详细内容。更多信息请关注PHP中文网其他相关文章！