CODEWITHSUNDEEP
htmlcssless
123qwe
123qwe

Reputation: 1585

Unexpected effects of LESS calc() function

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?

Upvotes: 1

Views: 151

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241248

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

Upvotes: 3

Related Questions