LESS: Extend a previously defined nested selector

Question

I've been trying like a mad man to get the following LESS statement to work, but now i am fearing that it's not gonna happen :/ So I am turning now to you guys in the end for help!

I have the following statement:

.top{
    &-first{
        background:black;
        &-item{
            color:white;
        }
    }
    &-second{
        background:green;
        &-item:extend(.top-first-item){}
    }
}

I was hoping for to achive the following output:

.top-first {
    background: black;
}
.top-first-item,
.top-second-item{
    color: white;
}
.top-second {
    background: green;
}

But unfortunately it does not compile that but this instead:

.top-first {
    background: black;
}
.top-first-item{
    color: white;
}
.top-second {
    background: green;
}

Answer 1

LESS currently does not support extending a "concatenated name" selectors (basically, .top &-first &-item is interpreted as three distinct selector elements and never found by extend looking for a single selector).

A workaround for your particular case:

.top {
    &-first {
        background: black;
    }

    &-second {
        background: green;
    }

    &-first, &-second {
        &-item {
            color: white;
        }
    }
}

Answer 2

Another option is to break the designations into separate classes:

LESS

.top{
    &.first{
        background:black;
        &.item{
            color:white;
        }
    }
    &.second{
        background:green;
        &.item:extend(.top.first.item){}
    }
}

CSS Output

.top.first {
  background: black;
}
.top.first.item,
.top.second.item {
  color: white;
}
.top.second {
  background: green;
}

Which of course requires a change in your html designation from class="top-first-item" to class="top first item".