What is the right syntax for .less variable interpolation?

So if I understand correctly, you want to give the width a value but without any units, and assign the units at the time of the call. I'm not sure why you would want to do that, but there are two ways that would work:

ONE: make the width a string and then do a string interpolation:

@width: '600';

.some-style
{
    width: ~'@{width}px';
}

TWO: multiply by 1px:

@width: 600;

.some-style
{
    width: @width * 1px;
}

I've left the above answers in place for a case of "unitless" numbers and how to add the unit later (as the question appeared to be at first). However, based on your comment let me explain why @width: 600px works. LESS does not see that as a string (as you mention you view it). Rather, it sees it as a number with units. To LESS 600px is not the string of characters (unless it is wrapped in quotes), but the number 600 in units of pixels. This is why it can do operations on it just fine, without you having to worry about it. It can do so whether those units are em or % or any other valid CSS unit.

Tags:

Less

Dotless