如何扩展使用&组合器动态形成的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; }
像这样扩展 动态形成的选择器 (宽松地使用该术语)目前在Less中是不可能的。有一个开放功能要求来支持此功能。直到实施,这里有两个解决方法。
选项1:
将.hello和.hello- world选择器的内容写入单独的Less文件(例如test.less),进行编译以获取CSS。为的规则创建另一个文件.foo,将编译后的CSS导入为Less文件(使用(less)指令),然后.hello- world按照您的初衷进行扩展。
.hello
.hello- world
test.less
.foo
(less)
无测试:
.hello { &-world { color: red; } }
扩展规则
@import (less) "test.css"; .foo { &:extend(.hello-world); font-size: 20px; }
编译的CSS:
该方法之所以可行,是因为在test.css导入文件时,选择器已经形成并且不再动态。缺点是它需要一个额外的文件并创建依赖项。
test.css
选项2:
写有规则的虚拟选择所有属性需要被应用到.hello-world和.foo并扩展它,如:
.hello-world
.dummy{ color: red; } .hello { &-world:extend(.dummy) {}; } .foo:extend(.dummy){ font-size: 20px; }
这会创建一个额外的选择器(虚拟),但差异不大。
注意: 将我的评论添加为答案,以免留下未解决的问题,并且还因为在评论中链接的线程中指定的变通方法不适用于我。