扩展Fontello图标

Question

我试图在less中扩展由Fontello生成的图标伪类。

现在，当这个方法起作用时：

.icon-extended:before:extend(.icon-caret-n:before) {}

这不是：

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

看不出为什么？

本例中的li:before将从.icon-ok:before获取内容定义，而不是从[class^="icon-"]:before, [class*=" icon-"]:before获取常规样式。

对我来说像是个虫子？

Answer 1

你的第一个案例...

.icon-extended:before:extend(.icon-caret-n:before) {}

...you正在扩展一些东西，它本身有一个名为.icon-extended的类，因此该类也与选择器[class^="icon-"]，[class*=" icon-"]匹配，这就是它工作的原因(它与本例中的:extend无关)。

你的第二个案例...

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

...you正在扩展一些在其选择器ul.checked li中没有记录的icon-值，因此不会也不应该与[class^="icon-"]、[class*=" icon-"]中的任何一个匹配。现在，您的扩展不会更改类名，而只是将选择器添加到定义.icon-ok:before的代码块中(并且只添加该代码块)。LESS扩展只查看选择器字符串.icon-ok:before，并不“智能”地知道这样的选择器将与其他选择器字符串[class^="icon-"]、[class*=" icon-"]匹配(这基本上就是seven-phases max的注释所涉及的内容)。所以你必须显式地这样做，最好是这样：

ul.checked li:before:extend(
  .icon-ok:before,
  [class^="icon-"]:before,
  [class*=" icon-"]:before) {
    color: #4fa33b;
}