我正在学习第一次使用CSS预处理器(LESS),并且在该父类是变量名时尝试定义继承类的类时遇到问题.
这基本上就是我想做的事情：
@import "font-awesome/font-awesome.less"
.icon-application-home{
.fa .fa-home;
}
但是因为fa在Font Awesome中被定义为：
@fa-css-prefix: fa;
那么少就不会编译,因为它不能识别.fa.所以我尝试了这个：
@import "font-awesome/font-awesome.less"
.icon-application-home{
.@{fa-css-prefix} .@{fa-css-prefix}-home;
}
然而,这也不起作用.有没有解决方法？我能在这做什么？
编辑
我在这里找到了半个答案：
Missing Font-Awesome.less variables in my .less file after importing
如果我执行以下操作,则(部分)有效：
@import (less) "../font-awesome.css";
.icon-home {
.fa;
}
但是,我注意到.fa-home不存在…只有.fa-home：之前…所以我试过这个：
@import (less) "../font-awesome.css";
.icon-home {
.fa;
.fa-home:before;
}
和
@import (less) "../font-awesome.css";
.icon-home {
.fa;
}
.icon-home:before {
.fa-home:before;
}
这些都不起作用.有任何想法吗？
解决方法
假设您使用包含Less 1.4.2的WE2012,最简单的解决方案是：
@import (less) "../font-awesome.css";
.icon-application-home {
&:extend(.fa,.fa-home all);
}
要么：
@import (less) "../font-awesome.css";
.icon-application-home
:extend(.fa,.fa-home all) {
}
阅读extend documentation,了解这些东西的工作原理.
如果您升级到包含Less 1.6.x的IDE /编译器,您将能够：
@import ".../font-awesome.less"
.icon-application-home {
.fa;
&:before {content: @fa-var-home}
}
那里你仍然不能使用.fa-home或.fa-home：之前作为mixins,因为第一个没有定义,第二个不是有效的mixin选择器,幸运的是&：before {content：@ fa-var-home}就像.fa-home那样.但总的来说,基于扩展的解决方案更加优化,因为它可以生成更紧凑的CSS.
