4

如何扩展使用 & 组合器动态形成的 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;
}
4

1 回答 1

8

像现在这样在 Less 中扩展动态形成的选择器（松散地使用该术语）是不可能的。有一个开放的功能请求来支持这一点。在实现之前，这里有两个解决方案。

选项1：

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

无测试：

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

扩展规则.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;
}

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

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

于 2014-10-19T11:40:28.280 回答