0

I'm trying to use CSS calc function to calculate size with different units on my web page.

I have some element height expressed in em. I want to add some pixels to it.

calc(3em + 10px)

Surprisingly the result CSS produced by LESS is calc(13em). Why?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Arkadiusz Kałkus
  • 17,101
  • 19
  • 69
  • 108

1 Answers1

1

That's your LESS aggressively compiling the calc into a fixed value, while it should output the CSS calc as is, and let the browser do the math at runtime.

As for why it returns 13em, It's pretty much how in javascript a 10 + '20' returns a string with a 1020 value.

You need to turn strictMaths on, and use additional ("unnecessary") parenthesis whenever you want the value to actually be compiled.

Read the documentation about strictMaths in Less.

Facundo Corradini
  • 3,825
  • 9
  • 24
  • Is there any way to make LESS less agressive? – Arkadiusz Kałkus Jan 14 '18 at 19:12
  • 1
    yup, I **think** it's a matter of adding the `-sm=on`(strict math) to your compiler command. `$ lessc -sm=on styles.less styles.css`, then using brackets in your .less file when you actually want it to compile a value. But it's been a while since I switched to SASS and / or postCSS, so I might be totally off :p – Facundo Corradini Jan 14 '18 at 19:18