将样式属性传递给更少mixin

是否可以将更少的通用字符串传递给mixin？我习惯传递值，如：将样式属性传递给更少mixin

.border-radius (@radius) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    -ms-border-radius: @radius; 
    -o-border-radius: @radius; 
    border-radius: @radius; 
}

但是我现在发现我想要做这样的事情：

.makeRed (@style) { 
    @style: red; 
} 
.makeRed('border-color');

我已经尝试了上面，但它不工作，不投编译错误，它只是不编译任何东西。

想法？

来源

2014-09-25 Mike Oram

是的，你可以。使用'@ {style}：red;'代替'@style：red;'并且不要在mixin调用中使用引号。 *注意：*带有参数的mixin必须在选择器块内调用以产生输出，所以它应该被称为'#id {.makeRed（border-color）;}'或类似的东西。 – Harry 2014-09-25 10:22:21

太棒了，那有效！如果你让一个实际的答案不好，接受它！谢谢 – 2014-09-25 10:23:50

我其实认为这是一个重复的问题队友，但现在无法追查原来的问题。所以，现在会添加一个答案，看看我能否追溯旧的。 – Harry 2014-09-25 10:33:23

是的，您可以将属性名称传递给mixin，并使用Less中的属性名称插值为其指定值。

mixin值应该像花括号中的字符串一样引用（@{style}）。另外，mixin调用应该从选择器块内部调用，否则参数混合在编译时不会产生任何输出。

.makeRed (@style) { 
    @{style}: red; // using the parameter 
} 

#id{ // selector block 
    .makeRed(border-color); // mixin call with no quotes 
}

注：此方法只从少V1.6.0及以上的工作。

来源

2014-09-25 10:34:48 Harry

将样式属性传递给更少mixin

回答

相关问题