Saving spaces in LESS escaping for calc operands in CSS3

Question

I would like to express the following CSS in LESS:

.a { min-height: calc(2em + 4px); } 

So, to prevent LESS from trying to compute, I wrote this expression using the LESS escape syntax :

 .a { min-height: ~'calc(2em + 4px)'; } 

However, the LESS ENGINE MONITORING discards spaces and emits:

 .a{min-height:calc(2em+4px);} 

This is problematic because webkit cannot correctly calculate 2em+4px , while 2em_+_4px works fine (underscores are added for clarity.) It seems like a real bug here in webkit, since I hope CSS3 calc syntax allows not to be spaces between tokens.

Answer 1

This is kind of an old post, but I wanted to show you a simple mathematic way to do this.

I also have this problem with my mining engine. The mine works fine with subtraction, but additionally removes spaces. If someone has the same problem, this is the easiest workaround.

If you want to:

 .a { min-height: ~'calc(2em + 4px)'; } 

Instead, write this:

 .a { min-height: ~'calc(2em - -4px)'; } 

Answer 2

You must use the escape function, applying it differently:

FIRST OPTION :

 .a { min-height:calc(~"2em + " 4px); } 

SECOND OPTION : Restricting the use of the escape character ~ only to the + character:

 .a { min-height:calc(2em ~"+" 4px); } 

Both of these will result in the following CSS being processed:

 .a { min-height: calc(2em + 4px); }