LESS mixin一个变量类名

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个问题(对于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:重新生成.@ {name}类作为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版本(参见这里的答案):

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

然后你就可以使用像LESS mixins这样的CSS规则,或者根据你的需要扩展它们的选择器,它应该可以完美地工作.

更新:

从LESS> = 1.6开始,内插选择器的规则可以作为mixins访问...所以上面的#2限制形式不再适用(但你仍然无法通过插值动态调用mixin).所以你可以简单地从导入的font-awesome.less文件中调用LESS mixins和变量,如下所示:

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