導入後我的.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插件棄用的字體 - 真棒類沒有任何破解的jQuery 。感謝您的建議！

Answer 1

那麼，不允許像這樣通過變量調用mixin：.@{fa-css-prefix};。 通過.fa調用它也是不可能的（按v1.5.1），但是這個計劃在未來的LESS版本中被允許。

目前的解決方法是導入預編譯「字體真棒」 CSS文件，更少的代碼，並使用他們的選擇作爲混入通常的方式，例如：

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