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

Question

I have the following css declaration in a .less file:

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

When I compile this code, the angular-cli converts the width: calc(100% - 26px); to width: calc(76%).

Any one can explate why this is happening and how can I prevent this behavior?

possibly related: https://stackoverflow.com/q/17904088/1169798 — Sirko, Aug 16 '18 at 11:29

score 1 · Accepted Answer · answered Aug 16 '18 at 11:32

you can escape your declaration (notice the ~ tilde):

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

the above will output after compilation:

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

keep in mind that it's not the angular-cli but your LESS compiler doing this bit

alternatively you can look into interpolation which is a pretty useful feature in other situations too: https://github.com/SomMeri/less4j/wiki/Less-Language-String-Interpolation

1 Answers1