Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

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

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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:


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;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...