在less中不能正常使用css3的calc属性的解决方法

calc是css3增加的一个自动计算长度的方法

可以进行不同单位数值之间的四则运算，比如：

.test{
  width: calc(100% - 50px);
}

但是当我们在less中使用这个方法的时候却出现了问题：

less中写法：
.test{
  width: calc(100% - 50px)
}

less编译后：
.test{
  width: 50%;
}

出现这个问题的原因是less的运算方式和calc发送了冲突，要解决这个问题可以这样设置：

.test{
  width: calc(~"100% - 50px");
}

编译为
.test{
  width: calc(100% - 50px);
}

 

如果进行数值和变量之间的运算可以这样设置：

@diss = 50px;

.test{
  width: calc(~"100% - @{diss}")
}

 

结论：

• less中 “~”  符号后面双引号里面的内容会被less编译忽略，而直接输出为css代码
• less中@和{}配合可以在字符串里面使用变量，很像es6里面的模板字符串 `${}`