css - 如何使用 LESS 将多个 Font Awesome 类组合到一个选择器中？

Question

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

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

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

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

在这种情况下，我只想在我对元素使用类 step-current 时应用样式 .fa、.fa-play 和 .text-success。但是，当我尝试编译这个 less 文件时出现错误(使用 Web Compiler 2015)。

.fa-play 是一个未声明的 Mixin。

显然我可以这样:class="fa fa-play text-success"在我的标签中，但我真的很想知道是否可以执行上述操作。

谢谢

Answer 1

LESS 出错是因为 Font Awesome 没有样式 .fa-play，只有 .fa-play:before。使用 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。)