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

Question

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

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

当我在我的 HTML 中使用 .fa 类时，它工作得很好，所以它编译成 css，但是当我在我自己的 less 文件中使用 less 变量时...

.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 hack 的情况下覆盖 jQuery 插件中已弃用的 Font-Awesome 类。感谢您的建议！

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
• 等

---

更新，LESS 1.6.0：现在可以将 FA 插值选择器用作 mixins（但 不是 :extend 他们） ，即：

@import "font-awesome.less";

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