一尘不染

LESS mixin变量类名

css

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

有可能做到这一点吗?当然,这对我来说将是一个美丽的按钮。


阅读 920

收藏
2020-05-16

共1个答案

一尘不染

您尝试执行的操作至少有2个问题( 对于LESS > = 1.6,请参见update bellow):

1)不幸的是,无法使用选择器插值来调用mixin。

通过选择器插值,LESS期望构造为以下格式:

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

(插值选择器还可以在插值之前或之后具有一些静态字符串)

所以

.@{selector-string};

无法识别的 由LESS编译器。

2)具有插值选择器的规则集将直接打印到CSS输出,并且不存在可以在LESS运行中重用的mixin

例如:

@foo: test;

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

.bar {
  .test;
}

将返回:

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

在此处查看更多信息:少CSS:将生成的。@{name}类重用为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和变量:

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