使用Less中的`＆amp;'字符继承一个由哪个名字组成的类

Question

如何从一个使用&字符组成的名称的类（例如&-rule）继承？

期望输出

.prefix-rule-extended,
.prefix-rule {
    color: white;
}
.prefix-rule-extended {
    background-color: black;
}

或

.prefix-rule {
    color: white;
}
.prefix-rule-extended {
    color: white;
    background-color: black;
}

非工作方法

.prefix {
    &-rule {
        color: white;
    }
}

加

.prefix-rule-extended:extend(.prefix-rule) {
    background-color: black;
}

或

.prefix-rule-extended {
    .prefix-rule();
    background-color: black;
}

理想方法

.prefix {
    &-rule {
        color: white;
    }
    &-rule-extended:extend(&-rule) {
        background-color: black;
    }
}

注1：我知道目前不支持:extend(&-rule)。

注意2：.prefix-rule并非如此简单，i.a。内部有嵌套规则，因此以下内容不起作用：

.prefix {
    &-rule {
        color: white;

        &-extended {
            background-color: black;
        }
    }
}

谢谢。

Answer 1

（好的，所以一如既往地不留下这个没有答案 - 上面的评论摘要）：

目前extend这种事情是不可能的。目前extend无法匹配通过“连接”生成的选择器标识符，因此.prefix {&.rule { ...将是有效的extend目标（因为它是“两个元素” - ＆gt;“两个标识符”）但是.prefix {&-rule { ...不会（因为它是“两个元素” - ＆gt;“一个标识符”）。

因此，如果您打算使用extend，请不要热衷于这种嵌套，请保持简单。 这里有三个有效的Less片段（每个片段都有其优缺点）来获得所需的CSS输出。

<强> 1 ：

.prefix-rule {
    color: white;
    &-extended:extend(.prefix-rule) {
        background-color: black;
    }
}

<强> 2 ：

.prefix-rule {
    &, &-extended {
        color: white;
    }
    &-extended {
        background-color: black;
    }
}

第3 ：

.rule-base {
    color: white;
}

.prefix-rule {
    &:extend(.rule-base);
    &-extended:extend(.rule-base) {
        background-color: black;
    }
}