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

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

像这样扩展 动态形成的选择器
（宽松地使用该术语）目前在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;}

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

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