Disable Less-Css Overwriting Calc()

Disable LESS-CSS Overwriting calc()

Using an escaped string (a.k.a. escaped value):

width: ~"calc(100% - 200px)";

---

Also, in case you need to mix Less math with escaped strings:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Compiles to:

width: calc(100% - 15rem + 15px + 2em);

This works as Less concatenates values (the escaped strings and math result) with a space by default.

Why does LessCSS using calc() ignore the second dimension in a calculation?

Use the following syntax to escape the Less rendering:

calc(100%/6 ~"- 24px") !important

This will then output as:

calc(16.66666667% - 24px) !important

http://lesscss.org/functions/#string-functions-e

How to prevent Less from trying to compile CSS calc() properties?

Less no longer evaluates expression inside calc by default since v3.00.

---

Original answer (Less v1.x...2.x):

Do this:

body { width: calc(~"100% - 250px - 1.5em"); }

In Less 1.4.0 we will have a strictMaths option which requires all Less calculations to be within brackets, so the calc will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.

Less CSS3 calc function becomes invalid

This is an issue with the "MVC Bundling", This appears fixed in newer versions of MVC. Updated 4 to 5.2.7 However for older versions,

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

You should rewrite it as:

margin-left: calc((-50vw) - -50%);
margin-right: calc((-50vw) - -50%);

deactivate less temporarily - having a less-free expression

Copied from Disable LESS-CSS Overwriting calc()

You can use an escaped value:

width: ~"calc(100% - 200px)";

---

Also, in case you need to mix Less math with escaped values:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Compiles to:

width: calc(100% - 15rem + 15px + 2em);

This works as Less concatenates values (the escaped values and math result) with a space by default.

Unexpected effects of LESS calc() function

LESS Documentation - String Functions - Escaping

CSS escaping, replaced with ~"value" syntax.

When you're using LESS, you need to escape it, otherwise the numbers will be evaluated, as you are seeing. In this case, you would use calc(~"100% - 40px"):

#myDiv {
    height: calc(~"100% - 40px");
}

Css calc() function, operator +

Ok, I solve it with trying this :

~"calc(33.33333333% + 20px)";

And it's perfect working.

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

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

Less.js: error evaluating function `min`: incompatible types

Refer to Disable LESS-CSS Overwriting calc(), you can use escape string in LessCSS:

#mapid {
    width: 100%;
    min-height: ~"min(65vh, 500px)";
    max-height: 500px;
}

---

Related Topics