Less 中使用 calc 计算注意事项

基础转义

less

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

编译为css

div > span {
  width: calc(100% - 10px);
}

变量插值

less

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

编译为css

div > span {
  width: calc(100% - 10px);
}

混合使用

less

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

编译为css

div > span {
  width: calc((100% - 10px) - 80px);
}