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

Answer 1

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".

Answer 2

This is obviously something that should be working in LESS. I have a few months ago put an issue on the LESS.js github regarding exactly this.

Link to Github issue

In the mean time, i recommend using seven-phases-max's solution by simply putting the classes together like so:

&-first, &-second {}

But then you cant abstract the second out into another file.

Another solution would to make an "extends.less" file, in which you can have small snippets you find your self using time from time.

Answer 3

Just use 'all' suffix. Example: &:extend(.top-first-item all);

Answer 4

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;
        }
    }
}