导入后,我的.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);
}

有关更多详情,请参阅

更新,LESS 1.6.0:现在可以使用FA插值选择器作为mixins(但不是 :extend它们),即:

@import "font-awesome.less";

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