扩展Fontello图标

Question

我正在努力扩展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) {}

...你正在扩展一个类本身名为.icon-extended的东西，以便该类也匹配选择器[class^="icon-"]，[class*=" icon-"]，因此它的工作原理（它无关在这种情况下使用:extend。

你的第二个案例......

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

...您正在扩展其选择器icon-中没有注明ul.checked li值的内容，因此不会也不应该匹配[class^="icon-"]，{{1 }}。现在，您的扩展名不会更改类名，而只是将选择器添加到定义[class*=" icon-"]的代码块（并且只有该代码块）。 LESS扩展看起来纯粹是选择器字符串.icon-ok:before，并且在知道这样的选择器与其他选择器字符串.icon-ok:before，[class^="icon-"]匹配时并不“智能”（这基本上就是七-phases-max的评论是关于）。所以你必须明确地做，最好是这样：

[class*=" icon-"]