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}")
}

猜你喜欢

转载自www.cnblogs.com/supershare/p/12532176.html