在前端开发中，我们经常需要进行数学计算来实现一些动态效果或者响应式布局。而在 CSS 中，我们可以使用 calc() 函数来进行数学计算。在 LESS 中，同样可以使用 calc() 函数，并且可以更加方便地进行计算和变量的使用。
LESS 中的 calc() 函数
calc() 函数是 CSS3 中的一个新特性，它可以在 CSS 中进行数学计算。在 LESS 中，我们可以使用 calc() 函数来进行数学计算，并且可以使用变量和函数来实现更加灵活的计算。
基本使用
calc() 函数的基本语法如下：
calc( <expression> )
其中，<expression> 可以是一个数值、一个变量、一个数学表达式或者一个函数。例如：
@width: 100px;
div {
width: calc(100% - @width);
}上面的代码中，我们定义了一个变量 @width，然后在 calc() 函数中使用了这个变量进行计算。最终，div 元素的宽度就是屏幕宽度减去 @width 的值。
支持的运算符
calc() 函数支持以下运算符：
+：加法-：减法*：乘法/：除法
例如：
div {
width: calc(100% - 20px * 2);
height: calc((100vw - 20px) / 2);
}上面的代码中，我们使用了加法、减法、乘法和除法运算符来进行计算。
支持的单位
calc() 函数支持以下单位：
px：像素em：相对于父元素的字体大小rem：相对于根元素的字体大小%：百分比vw：视口宽度的百分比vh：视口高度的百分比
例如：
div {
width: calc(100% - 20px);
height: calc(100% - 2em);
}上面的代码中，我们使用了像素和相对单位来进行计算。
LESS 中的高级用法
除了基本使用之外，我们还可以在 LESS 中使用 calc() 函数进行更加灵活和高级的计算。
变量的使用
在 LESS 中，我们可以使用变量来进行计算。例如：
@width: 200px;
div {
width: calc(100% - @width);
}上面的代码中，我们使用了变量 @width 来进行计算。这样，当我们需要修改宽度时，只需要修改变量的值就可以了。
函数的使用
在 LESS 中，我们可以使用函数来进行计算。例如：
@width: 200px;
@height: 100px;
@area: calc(@width * @height);
div {
width: @width;
height: @height;
line-height: @height;
font-size: calc(@height / 2);
background-color: #f00;
color: #fff;
text-align: center;
.area {
content: "@{area}px";
}
}上面的代码中，我们使用了函数来计算面积，并且使用了面积来设置内容。
嵌套的使用
在 LESS 中，我们可以使用嵌套来进行计算。例如：
@width: 200px;
@height: 100px;
div {
width: @width;
height: @height;
line-height: @height;
font-size: calc(@height / 2);
background-color: #f00;
color: #fff;
text-align: center;
.area {
content: "@{calc(@width * @height)}px";
}
}上面的代码中，我们使用了嵌套来计算面积，并且使用了面积来设置内容。
总结
在 LESS 中，我们可以使用 calc() 函数来进行数学计算，并且可以使用变量和函数来实现更加灵活的计算。通过学习本文，你已经掌握了 LESS 中 calc() 函数的基本用法和高级用法，相信你在日常开发中会更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c5c326add4f0e0ff04b590