如何扩展已动态形成选择器的类/混合

Question

如何扩展使用＆组合器动态形成的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中是不可能的。有一个开放功能要求来支持此功能。直到实施，这里有两个解决方法。

选项1：

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

无测试：

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

扩展规则

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

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

注意： 将我的评论添加为答案，以免留下未解决的问题，并且还因为在评论中链接的线程中指定的变通方法不适用于我。