I had a strange problem today and couldn’t (immediately) find the answer on Google or via the LESS documentation, so I thought I’d note it here quickly.

The situation

A project uses LESS and needed a multi-value border-radius, which I was trying to create thusly:

  border-radius: 25% / 50%;

But the CSS that LESS was creating was:

  border-radius: .5;

Because it was seeing 25% / 50% and assuming I wanted 25% divided by 50%, which I most definitely did not…

The solution

I tried several options myself (like wrapping the values in quotes, escaping with the standard forward-slash), but all failed.

I tried Googling, but found only links to how to do calculations in LESS, not how to prevent them.

In the end, it’s pretty easy, actually:

  border-radius: e("25% / 50%");

Nifty.

Happy LESSing,
Atg

Top⇪