Using calc() in less

Not sure if anyone else has run into this problem, but to celebrate a victory pulled from the jaws of defeat, I thought I’d share this tip.

To use css3 calc() with less you’ll need to play with the format a touch.

–

let’s assume a column gutter of .5em…in vanilla css, it looks like this -

.half {
  float: left;
  width: calc(50% - .5em);
}

but if you run this little gem through less, it outputs:

.half {
  float: left;
  width: (49.5%);
}

to get around this we need to tune down less’s aggression with the maths by escaping the percent unit.

.half {
  float: left;
  width: calc(~"50% - “.5em);
}

and huzzah! we get the expected output:

.half { float: left; width: calc(50% - .5em); }