LESS混合变量类名

Question

LESS混合变量类名

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

出现错误：解析错误：在 - 中未识别的输入，位于第...行

是否可能完成这个任务？这对我来说肯定会制作出一个漂亮的按钮。

- Peter Sankauskas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Turjak · Accepted Answer

你所尝试的做法存在至少两个问题（对于 LESS >=1.6，请参见下面的更新）：

1）很遗憾，使用选择器内插无法调用混合宏。

在使用选择器内插时，LESS需要使用以下格式的结构：

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

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

因此

.@{selector-string};

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

2) 一个包含插值选择器的规则集会直接输出到CSS输出，并且不作为可重复使用的mixin存在于LESS运行中。

例如：

@foo: test;

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

.bar {
  .test;
}

将返回：

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

在这里可以查看更多相关信息：LESS CSS：将生成的.@{name}类作为mixin重复使用

你的问题可能的解决方案是重新定义字体awesome规则，作为可重用的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 mixins和variables：

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