我正在使用Font Awesome 4.0.0，并希望在LESS中执行类似的操作：
.btn-github {
.btn;
.btn-primary;
margin-left: 3em;
i {
.@{fa-css-prefix};
.@{fa-css-prefix}-github;
.@{fa-css-prefix}-lg;
margin-right: 1em;
}
}
这不会编译错误：
ParseError：无法识别的输入 – 在线…
有可能做到这一点吗？它肯定会为我做一个漂亮的按钮。
解决方法
你想要做的事情至少有2个问题(对于LESS> = 1.6，请参阅下面的更新)：
1)不幸的是，无法使用选择器调用mixin
插值。
使用选择器插值LESS期望构造为
格式如下：
.@{selector-string} { property:value; }
(插值选择器也可以有一些静态字符串pre或
发布插值)
所以
.@{selector-string};
LESS编译器无法识别。在这里查看更多：
How can I call a mixin by reference in LESS?
2)带有插值选择器的规则集直接打印到CSS输出，并且不作为可在LESS运行中重用的mixin存在
例如：
@foo: test;
.@{foo} {
length: 20px;
}
.bar {
.test;
}
将返回：
Name error: .test is undefined
.bar { .test;}
点击此处查看更多信息：LESS CSS: Reuse generated .@{name} class as a mixin
你的问题的可能解决方案是将字体真棒规则重新划分为某种可重用的mixins(不使用插值)。像这样的东西：
@fa-var-github: "\f09b";
.fa-mixin() {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-mixin-lg() {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.fa-mixin-icon(@icon){
@var: "fa-var-@{icon}";
&:before { content: @@var; }
}
i {
.fa-mixin;
.fa-mixin-lg;
.fa-mixin-icon(github);
}
如果你真的不需要变量并且只想包含规则，最好的方法就是导入FontAwesome的编译CSS版本(参见答案here)：
@import (less) 'font-awesome.css';
然后你就可以使用像LESS mixins这样的CSS规则，或者按照你认为合适的方式扩展他们的选择器，它应该可以正常工作。
更新：
从LESS> = 1.6开始，内插选择器的规则可以作为mixins访问…所以上面的#2限制形式不再适用(但你仍然无法通过插值动态调用mixin)。所以你可以简单地从导入的font-awesome.less文件中调用LESS mixins和变量，如下所示：
i {
.fa;
.fa-lg;
&:before{
content: @fa-var-github;
}
}
