23

我正在使用 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: Unrecognised input in - on line ...

有可能做到这一点吗？它肯定会为我制作一个漂亮的按钮。

4

1 回答 1

52

您尝试做的事情至少有 2 个问题（对于 LESS >=1.6，请参阅下面的更新）：

1) 不幸的是，不能使用选择器插值来调用 mixin。

使用选择器插值 LESS 期望构造具有以下格式：

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

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

所以

.@{selector-string};

LESS 编译器无法识别。在此处查看更多信息： 如何在 LESS 中通过引用调用 mixin？

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

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

@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因此，您可以简单地从导入的文件中调用 LESS 混合和变量，如下所示：

i {
  .fa;
  .fa-lg;
  &:before{
    content: @fa-var-github;
  }
}
于 2013-10-26T05:54:09.890 回答