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
I think this is another example of developers needing to name their functions better. It looks like they already defined escape(), so e() was the other literal function.