使用 CSS `calc()` 属性时如何避免较少的编译器错误？

Les 编译器误解 CSS calc() 属性

某些 Less 编译器（包括 OrangeBits 和 dotless）会错误地转换 CSS calc() 表达式。例如，表达式“width: calc(100% - 250px - 1.5em)”被错误地转换为“width: calc(-151.5%)”。

Less 3.00 及更高版本的解决方案

在 Less 3.00 及以上版本中，编译器不再自动计算表达式在 calc() 内。此更改消除了使用 calc() 时手动干预的需要。

早期 Less 版本中的解决方案

对于 3.00 以下的 Less 版本，用户可以通过括起来来阻止自动计算~ 运算符中的 calc() 表达式。例如：

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

此外，Less 1.4.0 版本引入了 strictMaths 选项，该选项要求所有 Less 计算都用括号括起来。此选项确保默认情况下正确处理 calc() 表达式。

以上是使用 CSS `calc()` 属性时如何避免较少的编译器错误？的详细内容。更多信息请关注PHP中文网其他相关文章！