Unexpected effects of LESS calc() function

Question

This code:

index.htm.twig

<div id="myBar">Hello</div>
<div id="myDiv">{VERY_LONG_LOREM_IPSUM}</div>

pure style.css

#myBar {
    height: 40px;
}
#myDiv {
    height: calc(100% - 40px); // document height - #myBar height
}

Everything is OK here.

But when I change pure style.css to style.less:

style.less

#myBar {
    height: 40px;
}
#myDiv {
    height: calc(100% - 40px); // document height - #myBar height
}

The function calc(100% - 40px); is compiled to calc(60%); in style.css. I expected the same value like in pure style.css file.

How to fix this issue?

I'm assuming your css doesn't actually use equal signs but properly uses `:`? — James Montagne, Mar 05 '15 at 15:53
possible duplicate of [Disable LESS-CSS Overwriting calc()](http://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc) — Fabrício Matté, Mar 05 '15 at 18:03

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 05 '15 at 15:50

Josh Crozier

233,099
56
391
304

Unexpected effects of LESS calc() function

1 Answers1