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

问题描述

我使用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; 
} 
} 
  

p>

ParseError：无法识别的输入in-on line ...

是否可以实现这一点？

解决方案

至少有两个问题，你想做什么strong> for LESS> = 1.6 see update bellow ）：

1）

使用选择器插值LESS期望结构为
，格式如下：

 。@ {selector-string} {property：value; } 
  

（内插选择器在插值后也可以有一些静态字符串pre或
）

所以

 。@ {selector-string}; 
  

是由LESS编译器无法识别的。在这里查看：
如何在LESS中通过引用调用mixin？

2）带有插值选择器的规则集直接打印到CSS输出不存在为可以在LESS运行中重用的混合

例如：

  @foo：test; 
 
。@ {foo} {
 length：20px; 
} 
 
 .bar {
 .test; 
} 
  

将返回：

 名称错误：.test未定义
 .bar {.test;} 
  

在这里查看更多： LESS CSS：Reuse generated。@ {name} class as a 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 版本（请参阅answer 这里）：

  @import（less）'font-awesome .css'; 
  

，然后你可以使用CSS规则像LESS mixins或者扩展他们的选择器，

---

更新：

LESS> = 1.6 内插选择器的规则可以作为mixin访问...所以上面的＃2限制形式不再应用了（但是你仍然不能使用插值动态调用mixin）。因此，您可以从导入的 font-awesome.less 文件中简单调用LESS mixins和变量，如下所示：

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

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

That doesn't compile with the error:

ParseError: Unrecognised input in - on line ...

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

解决方案

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

1) Unfortunately it is not possible to call a mixin using selector interpolation.

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

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

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

so

.@{selector-string};

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

2) A ruleset with an interpolated selector gets directly printed to the CSS output and does not exist as a mixin that you could reuse in the LESS run

For example:

@foo: test;

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

.bar {
  .test;
}

will return:

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

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

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

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.

---

Update:

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混合变量类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！