使用LESS，如何在单独的font-awesome .less文件中引用类？

Question

背景

• 我正在使用Twitter Bootstrap来源LessJS
• 我正在使用font-awesome。less（从Bootstrap.less中引用）
• 我已从引导程序中删除了图标部分，因此它们不会发生冲突。
• 我有一个site.less文件，我也在Bootstrap中引用它包含一些特定于站点的样式。

目标

我希望能够在我的site.css文件中执行以下操作：

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}

问题

当我尝试上述方法时，我收到以下错误：

这个错误是有道理的;我只是不确定如何最好地纠正它而不在我的site.less中创建另外的font-awesome.less导入（我想这将是它自己的问题）。

澄清：以下评论：我有一个我在Knockout视图模型中使用的类名。 （例如，如果选择“赞美”，它将应用“FeedbackItemPraise”类）。如果选择了FeedbackItemPraise，我希望它从font-awesome应用.icon-thumbs-up类（通过Web字体显示图标），然后将颜色设置为绿色。

到目前为止我有什么

Bootstrap.less自定义（仅显示相关部分）：

//Sean's customizations
@import "background.less"; // Background images and colors 
@import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
@import "site.less"; // site-specific LESS

site.less中的类：

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}

Answer 1

已更新

再次查看Font-Awesome，看起来他们现在已经包含了图标的mixins。请参阅以下两个文件。

https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less

https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less

使用类似：

.feedbackItemIconPraise
{
    .icon(@thumbs-up-alt)
    color:Green;
}

ORIGINAL

如果你看一下font-awesome.less，你会看到该类不存在，它实际上是.icon-thumbs-up:before。遗憾的是，您不能将伪类用作mixins，例如.icon-thumbs-up:before;。

您需要修改font-awesome.less文件（或者只是添加此类，或者只是将content: "\f087";直接放在需要的位置），因此存在非:before版本：< / p>

.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-up                   { content: "\f087"; }

然后应用这个概念：

.feedbackItemIconPraise {
    font-family: "FontAwesome";
    font-size: 90px;
    padding-top: 7px;

    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;

    &:before {
        .icon-thumbs-up;
    }

}

似乎Font-Awesome图标必须使用:before伪来显示它们。

演示：http://pulse-dev.com/files/stackoverflow/fontawesomeclass/

Answer 2

可能还有另一个解决方案，但我在通过LESS编译器运行之前将我的脚本组合成一个文件（自动）。这允许我预先定义可以在任何LESS文件中使用的变量和混合。

online documentation确实提到LESS可以包含@import个文件，使变量和mixin可用。您可能需要确保使用最新版本的编译器，如果导入文件是按文件夹结构组织的，则可能需要告诉编译器在哪里搜索。

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});