小编典典

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

css

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

阅读 237

收藏
2020-05-16

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

这会创建一个额外的选择器(虚拟),但差异不大。

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

2020-05-16