Using Less, CSS3 Calc() Doesn't Work Correctly

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");
}

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 CSS not translating addition correctly using calc()

You can escape the calc arguments in order to prevent them from being evaluated on compilation.

Using your example, you would simply surround the arguments, like this:

calc(~'100% + 10px')

LESS CODE

div {
   > span {
    width:calc(~'100% + 10px');
    }
 }

CSS OUTPUT

div > span
{
  width: calc(100% + 10px);
}

Inspect element image given below

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.

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");
}

CSS3 calc(100%-88px) not working in Chrome

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{This article mentions that the spacing is necessary for unambiguous parsing.}

Bad: calc(100%-88px)

Good: calc(100% - 88px)

---

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

---

2022 Update - calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

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.

---

Related Topics