如何扩展具有动态形成选择器的类/ mixin

Question

如何扩展使用＆amp;动态形成的Less类？组合子？

Less会产生预期的输出：

.hello-world {
  color: red;
}

.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

预期的CSS输出：

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

Less不会产生预期的输出：

.hello {
  &-world {
    color: red;
  }
}

.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

意外的CSS输出：

.hello-world {
  color: red;
}
.foo {
  font-size: 20px;
}

Answer 1

扩展动态构建的选择器（松散地使用该术语），目前在Less中无法实现。有一个开放的feature request来支持这一点。直到它实现，这里有两个解决方案。

选项1：

将.hello和.hello-world选择器的内容写入单独的Less文件（比如test.less），编译它以获取CSS。为.foo规则创建另一个文件，将编译后的CSS导入为Less文件（使用(less)指令），然后按照原先的意图扩展.hello-world。

<强> test.less：

.hello {
  &-world {
    color: red;
  }
}

<强>扩展-rule.less：

@import (less) "test.css";
.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

已编译的CSS：

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

此方法可行，因为在导入test.css文件时，选择器已经形成且不再是动态的。缺点是它需要一个额外的文件并创建依赖。

---

选项2：

编写一个虚拟选择器，其中包含需要应用于.hello-world和.foo的所有属性的规则，并将其扩展为：

.dummy{
    color: red;
}
.hello {
  &-world:extend(.dummy) {};
}

.foo:extend(.dummy){
  font-size: 20px;
}

这会创建一个额外的选择器（虚拟），但差别不大。

注意：添加我的评论作为答案，以便不回答问题，也因为评论中链接的线程中指定的解决方法对我不起作用。