如何扩展已经形成动态选择一类/混入如何扩展已经形成动态选择一类/混入(How do I extend

如何扩展其使用和Combinator的动态形成一个都不能少类？

少，其产生预期的输出：

.hello-world {
  color: red;
}

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

预计CSS输出：

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

少不会产生预期的输出：

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

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

意外的CSS输出：

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

Answer 1:

延伸的动态形成的选择器 （松散地使用术语）等当前未欠可能的。 这里是一个开放的功能要求 ，以支持这一点。 直到它的实现，这里有两个变通解决它。

选项1：

写的内容.hello和.hello-world选择到一个单独的文件较少（说test.less ），编译得到的CSS。 创建规则的另一个文件.foo ，导入CSS编译作为一个都不能少文件（使用(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;
}

这将创建一个额外的选择（假），但差别不是很大。

注意：添加作为回答我的评论，以便不留下未回答此问题，也因为工作，各地在评论链接线程指定不为我工作原样。

文章来源: How do I extend a class/mixin which has dynamically formed selector