在用到less的项目中 原CSS3中的方法 calc 计算错误的问题解决方法
你有没有在开发微信小程序的时候用到wepy,而用less写css的时候使用到calc的时候计算有问题。怎么回事?
对于前端er来说,Less或Sass已经是一项必备的基本技能,有了这个利器,可以省下前端开发者的很多编码时间,让你写CSS如行云流水一般,然后最近我在Less里加入calc时确发现了有点问题,我在Less中这么写:
div {width : calc(100% - 30px);}
结果Less把这个当成运算式去执行了,结果给我解析成这样:
div {width: calc(70%);}
是由于less的计算方式跟calc方法有重叠,两者在一起有冲突,于是,我在Less中把calc的写法改写成下面这样:
div {width : calc(~"100% - 30px");}
然而,把30px替换为一个变量的正确写法(不然其他如 grunt-less Webstorm 等工具又会报错):
div {
@diff : 30px;
width : calc(~"100% - @{diff}");
}
版权属于:Joyber
本文链接:https://blog.qqvbc.com/default/83.html
转载时须注明出处及本声明