Press "Enter" to skip to content

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);
}
    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注