How to Prevent Less from Trying to Compile CSS Calc() Properties

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.

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.

How to avoid less compilator to calculate

Use double quotes " and a leading ~:

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

This will tell the compiler to use the string as is.

Problems with Calc in Less

You may need to move the calc from your variable to the places you are using it, and escape the operators. Using https://lesstester.com/ to do a quick test, the following less source code

@block-height: ~"(100vh - 110px) / 3"; 

.block1{ height: calc( @block-height ~"-" 100 ); } 
.block2{ height: calc( @block-height ~"*" 2); }

becomes this when parsed

.block1 {
    height: calc((100vh - 110px) / 3 - 100);
}
.block2 {
    height: calc((100vh - 110px) / 3 * 2);
}

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%);

Less and SCSS calc function

I had the same issue when I went from SASS to Less. You need to surround your calc() with quotations and a ~ in the front of it. Then it will calculate correctly. This is something called Less Language Escaping.

Less:

.test-div {
  width: ~"calc(100vh + 60vh)";
}

The calc routine using less

Escape the value:

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

Escaping is unnecessary in LESS 1.4 though, because calculations are only done when the calculation is surrounded by parentheses. For example:

prop: 20 + 10px;    ->  prop: 20 + 10px;
prop: (2 + 10px);   ->  prop: 12px;
prop: func(1 + 2);  ->  prop: func(1 + 2);
prop: func((1 + 2));->  prop: func(3);

Using Less, CSS3 calc() doesn't work correctly

Less will try to process all maths including 100% + 20px.

You could either set Strict Math on:

lessc -sm=on
lessc --strict-math=on

Or use a tilde-quote ~"100% + 20px" in order to prevent the statement from being processed by Less.

For instance:

.class {
    padding-left: calc(~"100% + 20px");
}

---

Related Topics