calc()函数

calc() 函数用于动态计算长度值。
1、需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
2、任何长度值都可以使用calc()函数进行计算；
3、calc()函数支持 "+", "-", "*", "/" 运算；
4、calc()函数使用标准的数学运算优先级规则。

less中使用calc()，遇到的问题是：
div {
width : calc(100% - 20px);
}
会被当做运算式去执行，结果解析成：
div {
width: calc(80%);
}

于是，正确的写法应该是：
div {
width : calc(~'100% - 20px');
}
此时就会被正确解析成：
div {
width: calc(100% - 20px);
}
如果把20px替换成一个变量，相应写法及问题如下图：

image.png

也可写为：
div {
@diff : 20px;
width : calc(~"100% - @{diff}");
}

文章借鉴博客https://www.cnblogs.com/mjbin/p/4776545.html