Question

I have next CSS:

.button {
    background-color: black;
    border-radius: 4px;
    color: white;
}

a.button {
    text-decoration: none;
    color: white;
}

I want to remake it with LESS, something like:

.button {
    background-color: black;
    border-radius: 4px;
    color: white;

    a& {
        text-decoration: none;
        color: white;
    }
}

But it generates next (wrong) CSS:

.button {
    background-color: black;
    border-radius: 4px;
    color: white;
}

/* unexpected space */
a .button {
    text-decoration: none;
    color: white;
}

How can I do it right?

Answer 1

This is totally a version issue. As @freejosh commented, it is resolved in latest releases of LESS. If you take your code above to http://less2css.org/ then it works fine (which is running LESS 1.3.3, though you can change the version to 1.3.0 and see that it no longer functions as you expect and puts the space in).

Since you state you are running lessc 1.3.0, you need to upgrade your LESS version.