Angular compilation .less 正在计算像素的百分比：'calc(100% - 26px)' to 'calc(76%)

Question

我在 .less 文件中有以下 css 声明：

.qb-select-content {
    width: calc(100% - 26px);
    float: left;
}

当我编译这段代码时，angular-cli 将 width: calc(100% - 26px); 转换为 width: calc(76%)。

任何人都可以解释为什么会发生这种情况以及如何防止这种行为？

Answer 1

您可以转义您的声明（注意 ~ 波浪号）：

.qb-select-content {
    width: calc(~100% - 26px);
}

以上编译后输出：

.qb-select-content {
    width: calc(100% - 26px);
}

请记住，这不是 angular-cli，而是您的 LESS 编译器在执行此操作

或者你可以研究插值，这在其他情况下也是一个非常有用的特性：https://github.com/SomMeri/less4j/wiki/Less-Language-String-Interpolation

Angular compilation .less is calculating pixels as percentage: 'calc(100% - 26px)' to 'calc(76%)