CODEWITHSUNDEEP
csslesscss-calc
SHRX
SHRX

Reputation: 579

Complicated calc() in LESS is not working as expected

i have this calculation in my less file:

height: calc((100vh - 60px) + ((100vw / 9) * 3));

but the result is not what i was expecting, in my chrome devtools the result is:

height: calc(73.33333333vh);

It should (in my viewport) be something like 130vh, its way off.

I already tried to find a solution for this, but was not able to fix it, and due to the more "complicated" nature of the value, i couldn't find comparable cases. I tried the following Calculations, but the result was always faulty.

height: calc((~"100vh - 60px") + ((~"100vw / 9") * 3)); // breaks, doesnt build CSS
height: ~"calc((100vh - 60px) + ((100vw / 9) * 3))";    // results in invalid height value

Anybody have an idea whats going wrong?

Any help is highly appreciated.

Upvotes: 1

Views: 391

Answers (1)

SHRX
SHRX

Reputation: 579

after A LOT of trying (literally over 2 hours), i figured it out:

height: ~"calc(calc(100vh - 60px) + calc((100vw / 9) * 3))";

if anybody can let me know anything about the mechanics here, please, let me know. this was a long time of guessing, i finally found this solution after i started implementing css and less variables and got my desired result. so basically that was 2 hours of trial and error

Upvotes: 1

Related Questions