calc less 下不起作用

在 less中不能使用css3 calc属性不能

css3 新增长度计算属性 可以根据不同单位计算宽度

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

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

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

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

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

.test{
  width: calc(~"100% - 50px");
}
  如果进行数值和变量之间的运算可以这样设置:
@diss = 50px
.test{
  width: calc(~"100% - @{diss}")
}

posted @ 2020-03-20 15:46  前端小超人  阅读(561)  评论(0编辑  收藏  举报