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

Question

如何扩展使用&combinator动态形成的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原样扩展.

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

这会创建一个额外的选择器(虚拟)但不是很大的区别.

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