导入后，我的.less文件中缺少Font-Awesome.less变量

Question

我的项目中出现了一个有趣的解析错误。我使用Font Awesome并将其导入我的app.less文件中。 （我使用官方的less.js客户端编译器。）

@import "@{assets}/font-awesome/less/font-awesome.less";

当我在我的HTML中使用.fa类时，它运行良好，所以它编译成css，但是当我在我自己的较少文件中使用较少的变量时，这样......

.icon-chevron-up, .icon-chevron-down{
    .@{fa-css-prefix}; // or .fa
}

......解析器停止了......

ParseError: Unrecognised input
in app.less?1 on line 36, column 2:

35 .icon-chevron-up, .icon-chevron-down{
36     .@{fa-css-prefix};
37 }

我必须在jQuery插件中覆盖已弃用的Font-Awesome类，而不需要任何jQuery hack。谢谢你的建议！

Answer 1

好吧，不允许通过这样的变量调用mixin：.@{fa-css-prefix};。 通过.fa调用它目前也是不可能的（通过v1.5.1），但计划在将来的LESS版本中允许这样做。

目前的解决方法是将预编译的'font-awesome'CSS文件导入为LESS代码，并以通常的方式将其选择器用作mixins，例如：

@import (less) "font-awesome.css";

.icon-chevron-up, 
.icon-chevron-down {
    .fa;
}

或者：

@import (less) "font-awesome.css";

.icon-chevron-up, 
.icon-chevron-down {
    &:extend(.fa);
}

有关详细信息，请参阅：

• https://github.com/less/less.js/issues/1196
• https://github.com/less/less.js/issues/1399
• https://github.com/less/less.js/issues/1485
• 等

---

更新，少 1.6.0 ：现在可以使用FA内插选择器作为mixins（但不 :extend他们），即：

@import "font-awesome.less";

.icon-chevron-up, 
.icon-chevron-down {
    .fa;
}