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

问题描述

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

I'm trying to nest a bunch of font awesome styles into a single css class I can use whenever I'd like. However, I'm getting an error with "Undeclared Mixin".

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

My .less file looks something like this:

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

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

在这种情况下，我想要做的是应用样式.fa ，.fa-play和.text-success每当我在一个元素上使用类步进电流。但是，当我尝试编译这个较少的文件（使用Web编译器2015）时，我得到一个错误。

In this case all I'd like to do is apply the styles .fa, .fa-play, and .text-success whenever I use the class step-current on an element. However, I'm getting an error when I try to compile this less file (using Web Compiler 2015).

.fa-play是Undeclare Mixin。

.fa-play is an Undeclare Mixin.

显然我可以这样：class =

Obviously I could just go like this: class="fa fa-play text-success" within my tag but I'd really like to know if it's possible to do the above.

感谢

推荐答案

由于Font Awesome没有风格 .fa-play c $ c> .fa-play：before 。要解决此问题，请使用（另请参阅此）。关键是，这将带来：之前样式。

LESS is tripping up because Font Awesome doesn't style .fa-play, only .fa-play:before. Get around this by using LESS's :extend syntax (see also this css-tricks write-up/tutorial). The key is the all keyword, which will bring in the :before styles.

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

你的 .text-success - 看起来不是Font Awesome的一部分...但是它不是你的问题的一部分，所以我想没有关系。你可能需要使用：extend 将其拉进来，或者你可以像以前一样使用它作为一个正常的旧LESS mixin。）

(Just guessing about what to do with your .text-success - that doesn't appear to be part of Font Awesome… but then it wasn't part of your problem, so I guess it doesn't matter. You might need to use :extend to pull it in, or you might be able to just use it as a normal old LESS mixin as I did above.)

这篇关于如何使用LESS将几个Font Awesome类组合到一个选择器中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！