css - 导入后我的 .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

嗯，不允许通过这样的变量调用混合:.@{fa-css-prefix};。 通过 .fa 调用它目前也是不可能的(v1.5.1)，但计划在未来的 LESS 版本中允许这样做。

目前的解决方法是将预编译的“font-awesome”CSS 文件导入为 LESS 代码，并以通常的方式将它们的选择器用作混合，例如:

@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 插值选择器作为混合(但不是 :extend 他们)，即:

@import "font-awesome.less";

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