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里面的模板字符串 `${}`