Css 变量类名称中的混合更少

我使用的是Font Aowesome 4.0.0，我想用更少的时间做类似的事情：

.btn-github {
  .btn;
  .btn-primary;
  margin-left: 3em;

  i {
    .@{fa-css-prefix};
    .@{fa-css-prefix}-github;
    .@{fa-css-prefix}-lg;
    margin-right: 1em;
  }
}

未编译时出现以下错误：

ParseError:无法识别的在线输入…

---

有可能做到这一点吗？这对我来说肯定是一个漂亮的按钮。

您尝试执行的操作至少有两个问题（对于小于等于1.6的部分，请参阅下面的更新按钮）：

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

使用选择器插值时，LESS希望构造为 以下格式：

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

（插值选择器也可以有一些静态字符串pre或pre 插值后）

所以

LESS编译器无法识别。请参阅此处的更多信息：

2）带有插值选择器的规则集直接打印到CSS输出，并且不存在可以在较少的运行中重用的混入

例如：

@foo: test;

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

.bar {
  .test;
}

将返回：

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

更多信息请参见此处：

可能的解决方案是将字体规则重新定义为某种可重用的混合体（不使用插值）。大概是这样的：

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

如果您真的不需要变量，只想包含规则，那么最好的方法就是导入编译后的CSS版本（参见答案）：

然后你可以使用CSS规则，比如减少混音，或者根据你的需要扩展他们的选择器，它应该可以完美地工作

---

更新： 从开始，小于>=1.6带有插值选择器的规则可以作为mixin访问。。。因此，上面的#2限制形式不再适用（但仍然不能通过插值动态调用mixin）。因此，您只需从导入的

font awesome.LESS

文件中调用较少的mixin和变量，如下所示：

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

---

+1太棒了。。。解释得很好，值得投票表决。干杯谢谢唯一不这样做的原因是，我在很多地方都有相同的按钮，并且希望将样式集中化。再次感谢！需要mixin的一个原因（也是我们需要它的原因）是，有时您处理的html是在您的控制之外生成的；例如，一个JS插件。在这些情况下，您需要能够通过纯CSS应用它们。

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

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