在开发过程中，我们常常会用到 CSS 的 calc() 函数，在 LESS 中使用也是很常见的。不过，在使用 calc() 函数时，我们可能会遇到一些问题，比如：运算符优先级不如期望、计算后的值不是我们期望的值等。接下来我们将介绍相关的问题以及解决方法。
问题一：运算符优先级不如期望
LESS 表达式中，有以下运算符优先级（从高到低）：
- 函数和括号
- 乘、除、模运算符
- 加、减运算符。
之前我们可能不知道，就没有注意它们的优先级，导致计算结果不如期望。
例如，我们想让一个元素的宽度等于视口宽度的一半减去 30px。我们可能会这样写：
width: calc(50% - 30px);
但是，如果我们把它写成：
width: calc(50% - 15px / 2);
这样就会出错，因为 "/" 的优先级比 "-" 低，所以 LESS 认为我们想要的是：50% 减去 15px 除以 2 的结果，而不是我们期望的宽度。
解决方法是使用括号明确运算的优先级，即：
width: calc((50% - 15px) / 2);
这样，计算时就会先计算 50% 减去 15px，再除以 2。
问题二：计算后的值不是我们期望的值
LESS 在计算 calc() 函数时，会自动把除法和乘法计算出来的值化为浮点数，这时就可能出现一些误差，导致计算后的值不是我们期望的值。
例如，假设我们想让一个元素的宽度等于视口宽度的一半减去 3.3rem，其中，1rem 等于 16px。按照常规的写法，我们可能会写成：
width: calc(50% - 3.3rem);
然而，我们获得的结果可能不是我们期望的值，这是因为 3.3rem 在 LESS 中被转化为浮点数计算，而浮点数可能无法精确地表示数字，导致一些误差。
为了解决这个问题，我们可以使用 LESS 自带的 ceil() 和 floor() 函数。
ceil() 函数会向上取整，floor() 函数会向下取整。例如：
// 向上取整 ceil(5.5); // 输出 6 // 向下取整 floor(5.5); // 输出 5
因此，我们可以把元素的宽度计算为：
width: calc(50% - ceil(3.3rem * 10) / 10 * 1rem);
这样计算出来的值就是我们期望的值。这里使用了乘以 10 先转化成整数再除以 10 的方法，以避免浮点数误差。
总结：
在 LESS 中使用 calc() 函数时，要注意运算符的优先级，避免出现计算错误；同时要注意浮点数误差，可以使用 ceil() 和 floor() 函数来避免。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497e7e348841e98944f0c36
