如何使用LESS将几个Font Awesome类组合成一个选择器？

Question

我正在尝试将一堆字体真棒样式嵌入到我可以随时使用的单个css类中。但是，我收到了“Undeclared Mixin”的错误。

我的.less文件看起来像这样：

@import (reference) "../Content/bootstrap/font-awesome/font-awesome.less";

.step-current {
    .fa;
    .fa-play;
    .text-success;
}

在这种情况下，每当我在元素上使用class step-current时，我想要做的就是应用样式.fa，.fa-play和.text-success。但是，当我尝试编译这个较少的文件时，我遇到了一个错误（使用Web Compiler 2015）。

.fa-play是一个Undeclare Mixin。

显然我可以这样：class =“fa fa-play text-success”在我的标签中，但我真的想知道是否可以做到以上。

由于

Answer 1

由于Font Awesome没有设置.fa-play，只设置.fa-play:before，因此LESS正在绊倒。使用LESS's :extend syntax解决此问题（另请参阅此css-tricks write-up/tutorial）。关键是all keyword，它将引入:before样式。

.custom-class {
    &:extend(.fa, .fa-play all);
    .text-success
}

（只是猜测如何处理你的.text-success - 这似乎不是Font Awesome的一部分...但是它不是你问题的一部分，所以我想这没关系。您可能需要使用:extend将其拉入，或者您可以将其用作普通的旧LESS mixin，如上所述。）