在前端开发中，我们经常需要对数字进行计算，在 CSS 中我们通常使用像素单位来进行计算。但是这种计算方式对于响应式布局并不友好，如果我们要在不同的设备上展示不同的宽度或高度，那我们就需要使用百分比单位或是 em 单位，而这些单位无法用简单的加减法进行计算。这时候，LESS 中的 calc() 函数就能派上用场了。
什么是 calc() 函数
calc() 函数是 LESS 中一种用于计算的函数，它可以让我们在 CSS 属性中使用复杂的表达式进行计算，并能够适应不同的单位和数值。
calc() 函数的语法
calc() 函数的语法非常简单，它的语法结构如下：
calc(expression);
其中 expression 表示要进行计算的表达式，我们可以在其中使用加、减、乘、除以及各种单位。
calc() 函数的使用方法
使用加减乘除运算符
我们可以在 calc() 函数中使用加减乘除运算符进行计算，像这样：
width: calc(100% - 20px); height: calc(50px * 2); border-width: calc(1px / 2);
上述示例代码中，我们使用了 calc() 函数对元素的宽度、高度以及边框宽度进行了计算。
使用各种单位
我们可以在 calc() 函数中使用各种单位来计算，比如 px、em、rem、% 等等，像这样：
width: calc(100% - 2 * 20px); height: calc(50px * 2 + 10%); font-size: calc(16px * 1.2 + 2rem);
上面的代码中，我们使用了不同的单位组合，对元素的宽度、高度和字体大小进行了计算。注意，当我们使用的单位不同时，需要进行相应的换算。
嵌套使用 calc() 函数
我们也可以在 calc() 函数中嵌套其它的 calc() 函数来进行计算，像这样：
width: calc(100% - calc(2 * 20px)); height: calc(calc(50px + 20px) / 2); border-width: calc(calc(1px - 0.5em) * 2);
上述代码中，我们使用了嵌套的 calc() 函数，对元素的宽度、高度和边框宽度进行了计算。
总结
通过本文的介绍，我们学习了 LESS 中 calc() 函数的使用方法，它为我们提供了在 CSS 属性中使用复杂表达式进行计算的能力，避免了一些重复繁琐的计算，使我们的代码更加简洁、优雅。在使用 calc() 函数时需要注意各种单位的换算，避免运算错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae555848841e9894a57eab