css - Missing Font-Awesome.less variables in my .less file after importing

Question

I got an interesting parse error in my project. I use Font Awesome and I imported it into my app.less file. (I use the official less.js client-side compiler.)

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

When I use the .fa class in my HTML it works good so it compiled into css, BUT when I use the less variables in my own less file like this...

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

...the parser halted with a...

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

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

I have to override the deprecated Font-Awesome classes in a jQuery plugin without any jQuery hack. Thanks for advise!

Answer 1

Well, it is not allowed to invoke a mixin via variable like this: .@{fa-css-prefix};. Invoking it via .fa is also currently impossible (by v1.5.1), but this is planned to be allowed in future LESS versions.

Currently the workaround is to import precompiled 'font-awesome' CSS files as LESS code and use their selectors as mixins the usual way, e.g.:

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

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

Or:

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

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

For more details see:

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

---

Update, LESS 1.6.0: it is now possible to use FA interpolated selectors as mixins (but not :extend them), i.e.:

@import "font-awesome.less";

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