CSS LESS 混合变量类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19602812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LESS mixin a variable class name
提问by Peter Sankauskas
I am using Font Awesome 4.0.0, and want to do something like this in LESS:
我正在使用 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;
}
}
That doesn't compile with the error:
这不会编译错误：
ParseError: Unrecognised input in - on line ...
ParseError: Unrecognised input in - on line ...
Is it possible to accomplish this? It would certainly make a beautiful button for me.
有没有可能做到这一点？它肯定会为我制作一个漂亮的按钮。
回答by Martin Turjak
There are at least 2 problems with what you are trying to do (for LESS >=1.6 see update bellow):
您尝试执行的操作至少存在 2 个问题（对于 LESS >=1.6，请参阅下面的更新）：
1) Unfortunately it is not possible to call a mixin using selector interpolation.
1) 不幸的是，不可能使用选择器插值来调用 mixin。
With selector interpolation LESS expects the construct to be of following format:
使用选择器插值 LESS 期望构造具有以下格式：
.@{selector-string} { property:value; }
(the interpolated selector can have also some static string pre or post the interpolation)
（插值选择器也可以在插值之前或之后有一些静态字符串）
so
所以
.@{selector-string};
is Unrecognisedby the LESS compiler. See more here: How can I call a mixin by reference in LESS?
是无法识别的由LESS编译器。在此处查看更多信息： 如何在 LESS 中通过引用调用 mixin？
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
2) 带有内插选择器的规则集会直接打印到 CSS 输出，并且不作为可以在 LESS 运行中重用的 mixin 存在
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
在此处查看更多信息：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 CSSversion of the FontAwesome (see answer here):
如果您真的不需要变量而只想包含规则，最好的方法就是导入FontAwesome的已编译 CSS版本（请参阅此处的答案）：
@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.
然后你可以只使用像 LESS mixins 这样的 CSS 规则，或者根据你的需要扩展它们的选择器，它应该可以完美地工作。
Update:
更新：
As of LESS >= 1.6rules 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.lessfile like so:
从LESS >= 1.6带有插值选择器的规则可以作为 mixins 访问......所以上面的#2 限制形式不再适用（但你仍然不能用插值动态调用 mixin）。所以你可以简单地从导入的font-awesome.less文件中调用 LESS mixin 和变量，如下所示：
i {
.fa;
.fa-lg;
&:before{
content: @fa-var-github;
}
}
