LESS mixin变量类名

您尝试执行的操作至少有2个问题（ 对于LESS > = 1.6，请参见update bellow）：

1）不幸的是，无法使用选择器插值来调用mixin。

通过选择器插值，LESS期望构造为以下格式：

.@{selector-string} { property:value; }

（插值选择器还可以在插值之前或之后具有一些静态字符串）

所以

.@{selector-string};

是 无法识别的 由LESS编译器。

2）具有插值选择器的规则集将直接打印到CSS输出，并且不存在可以在LESS运行中重用的mixin

例如：

@foo: test;.@{foo} {  length: 20px;}.bar {  .test;}

将返回：

    Name error: .test is undefined    .bar {  .test;}

在此处查看更多信息：少CSS：将生成的。@{name}类重用为mixin

对于您的问题，可能的解决方案是将字体真棒规则重新定义为某种可重用的混合（不使用插值）。像这样：

@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

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

然后您可以使用LESS mixins之类的CSS规则，也可以根据需要扩展其选择器，它应该可以完美地工作。

更新：

从 LESS > =
1.6起
，可以将带有插值选择器的规则作为mixins访问…因此，上面的＃2限制表不再适用（但是您仍然不能通过插值动态调用mixin）。因此，您可以

font-awesome.less

i {  .fa;  .fa-lg;  &:before{    content: @fa-var-github;  }}