1. CSS3中calc的使用
CSS3中的calc()函数是一种用于动态计算长度值的方法，它允许我们在CSS中使用数学表达式来计算长度。calc()函数可以用于各种CSS属性，如width、height、padding等。
calc()函数的语法是calc(expression)，其中expression是一个数学表达式，可以包含各种数值、操作符和单位。支持的操作符有加(+)、减(-)、乘(*)和除(/)。
例如，我们可以使用calc()函数来计算一个元素的宽度，比如：
width: calc(100% - 20px);
上述代码表示元素的宽度是父元素宽度减去20像素。
2. less编译中calc的问题
在使用less进行CSS预处理时，我们常常会遇到一个问题，就是less编译时无法正确解析calc()函数，而是将calc()函数的表达式直接输出到最终的CSS文件中。
比如，我们在less中写了以下代码：
width: calc(100% - 20px);
但是在编译后的CSS文件中，我们得到的代码是：
width: calc(100% - 20px);
这显然是不正确的，我们希望得到的CSS代码是：
width:calc(80%);
所以，我们需要一种解决办法来解决less编译中calc被计算的问题。
3. 解决办法
3.1 使用变量替代calc表达式
我们可以使用less的变量来替代calc表达式，然后在编译时进行计算，并将计算结果赋值给变量。这样，我们就可以直接使用变量来设置元素的样式。
例如，我们可以定义一个变量来保存calc表达式：
@calcExpression: calc(100% - 20px);
然后，在需要使用的地方直接使用变量：
width: @calcExpression;
这样，在编译后的CSS文件中，我们会得到正确的结果：
width:calc(80%);
3.2 使用less的~运算符
除了使用变量替代calc表达式之外，我们还可以使用less的~运算符来解决calc编译问题。
利用~运算符，我们可以在calc表达式前加上~符号，告诉less编译器不要对calc函数进行计算，而是将其原样输出到CSS文件中。然后，在运行时，浏览器会自动计算calc表达式。
例如，我们可以这样写：
width: ~"calc(100% - 20px)";
这样，在编译后的CSS文件中，我们会得到正确的结果：
width:calc(80%);
4. 总结
在使用less进行CSS预处理时，我们经常会遇到calc函数的计算问题。为了解决这个问题，我们可以使用变量替代calc表达式，或者使用less的~运算符来将calc表达式原样输出到CSS文件中，以便浏览器自动计算。
不管我们选择哪种方法，都可以有效解决less编译中calc被计算的问题，使我们能够更好地应用calc函数进行动态计算长度值。