[英]LESS mixin returning a custom variable name
I'm wondering if it's possible to create a mixin that can return a custom variable name. 我想知道是否有可能创建可以返回自定义变量名称的mixin。
For example, I have this mixin to return an rgba value. 例如,我有这个mixin返回一个rgba值。
.fadeColor(@color: #000; @opacity: 1) {
@returnColor: rgba(red(@color), green(@color), blue(@color), @opacity);
}
I can then do something simple like: 然后,我可以做一些简单的事情,例如:
.class {
.fadeColor(#f00, .5);
color: @returnColor;
}
I will get my faded red text. 我会得到褪色的红色文字。
Ideally what I'd like to have the mixin do is take in a name that will be the return value so I can do something like: 理想情况下,我想让mixin执行的操作是使用一个将作为返回值的名称,以便我可以执行以下操作:
.class {
.fadeColor(@myColor, #f00, .5);
color: @myColor;
.fadeColor(@myBG, #00f, .7);
background-color: @myBG;
}
Is this possible? 这可能吗? Is there a different approach that I can take to get the same result?
我可以采用其他方法来获得相同的结果吗?
I know that fade would be the most workable solution in this specific example, but in general, is creating a variable from a variable a thing that can be done in LESS. 我知道在此特定示例中,淡入淡出将是最可行的解决方案,但总的来说,从变量创建变量是一件可以在LESS中完成的事情。
You can store the variable name in a variable and call it with two @@variable
. 您可以将变量名称存储在变量中,并使用两个
@@variable
调用。 You would have to store the name of the inner variable somewhere, though. 但是,您必须将内部变量的名称存储在某个位置。 You could try something like this:
您可以尝试这样的事情:
.fadeColor(@name; @color: #000; @opacity: 1) {
@return: rgba(red(@color), green(@color), blue(@color), @opacity);
}
.class1 {
@name: return;
.fadeColor(@name; blue; 1);
border-color: @@name;
}
.class2 {
@myColor: return;
@myBG: return;
&{
.fadeColor(@myColor, #f00, .5);
color: @@myColor;
}
&{
.fadeColor(@myBG, #00f, .7);
background: @@myBG;
}
}
which will produce: 会产生:
.class1 {
border-color: #0000ff;
}
.class2 {
color: rgba(255, 0, 0, 0.5);
background: rgba(0, 51, 255, 0.7);
}
Probably that introduces a lot of unnecessary code. 可能会引入很多不必要的代码。 I don't know what you are trying to do, but you can probably find better ways to achieve what you want without requiring a mixin to return a value.
我不知道您要做什么,但是您可能可以找到更好的方法来实现所需的功能,而无需mixin返回值。 You could, for example, send the property as a parameter:
例如,您可以将属性作为参数发送:
.fadeColor(@property; @color: #000; @opacity: 1) {
@{property}: rgba(red(@color), green(@color), blue(@color), @opacity);
}
.class2 {
.fadeColor(color, #f00, .5);
.fadeColor(background, #00f, .7);
}
In Less 1.7.0 you can store complete rulesets in variables (see: detached rulesets feature ). 在Less 1.7.0中,您可以将完整的规则集存储在变量中(请参阅: 分离式规则集功能 )。 You might want to experiment with it.
您可能要尝试一下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.