Question

我正在使用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 ...

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

Answer 1

您尝试执行的操作至少有2个问题（ for LESS＆gt; = 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输出，并且不作为mixin存在，您可以在LESS运行中重复使用

例如：

@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＆gt; = 1.6 带内插选择器的规则可以作为mixins访问...所以上面的＃2限制形式不再适用（但你仍然无法动态调用mixin）用插值）。因此，您可以简单地从导入的font-awesome.less文件中调用LESS mixins和变量，如下所示：

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

LESS mixin一个变量类名

1 个答案:

更新