LESS:扩展先前定义的嵌套选择器

Question

我一直在尝试像疯子一样让下面的LESS声明发挥作用,但现在我担心它不会发生:/所以我现在转向你们这些人最后寻求帮助!

我有以下声明:

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

我希望得到以下输出:

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

但不幸的是它不能编译,但相反:

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

Answer 1

LESS目前不支持扩展"连接名称"选择器(基本上,.top &-first &-item被解释为三个不同的选择器元素,并且从未通过extend查找单个选择器找到).

针对您的特定情况的解决方法:

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

    &-second {
        background: green;
    }

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