LESS中使用calc

关于calc

CSS3 的calc()函数允许我们在属性值中执行数学计算操作。例如，我们可以使用calc()指定一个元素宽的固定像素值为多个数值的和。（注意必须都要带着单位）

.foo {
  width: calc(100px + 50px);
}

浏览器的支持性：已经得到的普遍的支持。

对于不支持calc()的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持calc()的浏览器，使用一个固定值作为回退。

.foo {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

在Less中使用calc

如果在less中这么写：

div {
　　width : calc(100% - 30px);
}

结果Less把这个当成运算式去执行了，结果给我解析成这样：

div {  width: calc(70%); }

所以需要修改为：

// 正常解析
div {
　　width : calc(~"100% - 30px");
}

解析后的结果是：

div {  width: calc(100% - 30px);  }  // 解析正确

然而，把30px替换为一个变量，怎么写呢？

div {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
}

Well Done!