LESS扩展不适用于导入的css

Question

我正在尝试使用LESS extend mixin将类名合并为一个，这个简单的例子没有给出预期的结果：

@import (less) "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

.todoFlag:extend(.fa .fa-flag all) {
    color: red;
}

导入的css上面的.fa-flag类只有一个这样的选择器：

.fa-flag:before {
  content: "\f024";
}

汇编的结果如下：

.todoFlag {
  color: red;
}

我期待.todoFlag将:before延长，但上面是编译后的css中为todoFlag生成的唯一行。

我正确使用延伸吗？ extend是否适用于像上面那样导入的类？

Answer 1

.todoFlag:extend(.fa .fa-flag all)仅扩展.fa .fa-flag个块（但“font-awesome.css”没有此类规则集）。只需要扩展.fa-flag：

.todoFlag:extend(.fa-flag all)

如果您需要延长.fa和.fa-flag，请使用：

.todoFlag:extend(.fa all, .fa-flag all)

Answer 2

我终于想通了（感谢Mária Jurčovičová对LESS这个“隐藏”功能的优秀写作。

.todoFlag:extend(.fa .fa-flag all)实际上将fa-flag扩展为fa的后代。实际上，fa-flag不是fa的后代，因此该语句无效。我真正想要实现的是将多个类替换为一个类。所以，如果你有，

<i class="fa fa-flag redColor"></i>

我想用，

替换它

<i class="todoFlag"></i>

要做到这一点，todoFlag需要首先从fa继承所有内容，包括所有伪选择器，如:after，然后它需要从fa-flag继承。为了实现这一点，我们需要使用LESS扩展的一个特性，允许这种多重继承。其语法是

.todoFlag:extend(.fa all):extend(.fa-flag all) {
    .redColor;
}

所以基本上，你为每个类调用extend两次。它有效！