LESS mixin 变量类名 [英] LESS mixin a variable class name

问题描述

我正在使用 Font Awesome 4.0.0，并想在 LESS 中做这样的事情:

I am using Font Awesome 4.0.0, and want to do something like this in 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: Unrecognized input in - on line ...

有没有可能做到这一点?它肯定会为我制作一个漂亮的按钮.

Is it possible to accomplish this? It would certainly make a beautiful button for me.

推荐答案

您尝试执行的操作至少存在 2 个问题(对于 LESS >=1.6，请参阅下面的更新):

There are at least 2 problems with what you are trying to do (for LESS >=1.6 see update bellow):

1) 不幸的是，无法使用选择器调用 mixin插值.

使用选择器插值 LESS 期望构造为以下格式:

With selector interpolation LESS expects the construct to be of following format:

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

(内插选择器也可以有一些静态字符串 pre 或贴插值)

(the interpolated selector can have also some static string pre or post the interpolation)

所以

.@{selector-string};

被 LESS 编译器无法识别.在此处查看更多信息:如何通过引用调用mixin在更少?

is Unrecognised by the LESS compiler. See more here: How can I call a mixin by reference in LESS?

2) 带有内插选择器的规则集会直接打印到 CSS 输出中，并且不作为可以在 LESS 运行中重复使用的 mixin 存在

例如:

@foo: test;

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

.bar {
  .test;
}

将返回:

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

在此处查看更多相关信息:LESSCSS:重用生成的 .@{name} 类作为 mixin

See more on that here: LESS CSS: Reuse generated .@{name} class as a mixin

您的问题的可能解决方案是将字体真棒规则重新定义为某种可重用的混合(不使用插值).像这样:

Possible solution for your problem would be redifinig the font awesome rules as some kind of reusable mixins (without using interpolation). Something like this:

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

如果您真的不需要变量而只想包含规则，最好的方法就是导入已编译的 CSS FontAwesome 版本(请参阅答案 这里):

If you don't really need the variables and just want to include the rules, the best way would be just to import the compiled CSS version of the FontAwesome (see answer here):

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

然后你可以只使用像 LESS mixins 这样的 CSS 规则，或者根据你的需要扩展它们的选择器，它应该可以完美运行.

and then you can just use the CSS rules like LESS mixins or extend their selectors as you see fit and it should work perfectly.

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

As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins ... so the #2 limitation form above does not apply anymore (but you still can not call a mixin dynamically with interpolation). So you can simply call LESS mixins and variables from the imported font-awesome.less file like so:

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

这篇关于LESS mixin 变量类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！