LESS: Extend a previously defined nested selector

compilation, css, extend, less

Solution

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

Problem

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

Original source