How to prevent LESS from calculating string values

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

One Response to How to prevent LESS from calculating string values

  1. Stephen says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)