【css】有关样式的一些问题

原创于 2022-12-07 15:00:52 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

本文介绍了在Less预处理器中使用calc属性时遇到的问题及其解决办法。由于Less将带有单位的混合运算全部按百分比计算，导致calc表达式无法正确工作。文章提供了正确的使用方式和变量替代方案。

calc在less中不起作用

错误原因：在less中 calc(100% - 60px) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(40%)

div{
  width: calc(~"100% - 30px");
}
//less中使用calc写法
@myHeight: 30px;
div{
  height: calc(~"100% - @{myHeight}");
}
//less中变量写法
//或者
div{
  width: ~"calc(100% - 30px)";
}