LESS calc function converts px to em during addition

Question

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?

add full code, since em is a relative unit so we need to see all the CSS — Temani Afif, Jan 14 '18 at 18:57
Please post a bigger snippet. 3em + 10 px should be equal to... 3em+10px. — Facundo Corradini, Jan 14 '18 at 18:57
are you, by any chance, actually using a pre-processor variable in the real code? — Facundo Corradini, Jan 14 '18 at 19:02
Actually I'm using LESS. I noticed it produce calc(13em). When changed it in CSS to calc(3em+10px) it throws 'invalid property value'. — Arkadiusz Kałkus, Jan 14 '18 at 19:02
calc should be used with spaces ... you should write `calc(3em + 10px)` — Temani Afif, Jan 14 '18 at 19:06
Actually it should be different question, but I'm wodering why LESS convert it to em... — Arkadiusz Kałkus, Jan 14 '18 at 19:09
read this https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc — Temani Afif, Jan 14 '18 at 19:12
@TemaniAfif while I agree that this question is sort of duplicated, the answer on the one linked above is 5+ years old and doesn't really apply to current LESS (2.7+, with 3.0 around the corner..).. We didn't even had the strictMaths option back then — Facundo Corradini, Jan 14 '18 at 19:26
@FacundoCorradini this is because you have to consider all the answers, comments and also all the questions linked in the right side of the page ;) and even if the question it too old we will for sure find a hint/clue. The purpose of duplicate is not to provide an exact question dealing with the exact same situation but a question dealing with the same issue, then it's up to you to investigate more. — Temani Afif, Jan 14 '18 at 19:30
@FacundoCorradini and here is all the linked question to the duplicate ones https://stackoverflow.com/questions/linked/11972084?lq=1 .. am sure there is the needed answer there :) — Temani Afif, Jan 14 '18 at 19:34

Facundo Corradini · Answer 1 · 2018-01-14T19:29:59.843

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.

edited Jan 14 '18 at 19:29

answered Jan 14 '18 at 19:11

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

LESS calc function converts px to em during addition

1 Answers1