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

Question

我正在尝试将一堆很棒的字体样式嵌套到一个 css class 中，我可以随时使用。但是，"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。但是，当我尝试编译这个 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 (see also this css-tricks write-up/tutorial). The key is the all keyword 解决这个问题，这将引入 :before 样式。

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

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

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

How to combine several Font Awesome classes into one selector using LESS?

css

less

font-awesome

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