CODEWITHSUNDEEP
cssless
Rost
Rost

Reputation: 3662

LESS: How to specify current tag with nesting?

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?

Upvotes: 4

Views: 93

Answers (3)

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 1

M4rk
M4rk

Reputation: 2272

It isn't beautiful, but it works! :)

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

a,b,other{
    &.button{
        .button;
        text-decoration: none;
        color: white;
    }
}

Upvotes: 0

isherwood
isherwood

Reputation: 61055

These elements are not necessarily nested, and therefore LESS nesting doesn't apply.

Upvotes: 1

Related Questions