LESS mixin中的“引用”参数变量

Question

我有以下颜色定义数组：

@colors: ~"black" #000, ~"white" #fff, ~"blue" #008FD6, ~"bluehover" #44A1E0, ~"grayborder" #DBDBDB;

我使用以下函数在CSS声明中使用这些颜色。

.colorkey(@key) {
    .-(length(@colors));
    .-(@i) when (@i > 0) {.-((@i - 1))}
    .-(@i) when (@key = extract(extract(@colors, @i), 1)) {
        @colorkey: extract(extract(@colors, @i), 2);
    }

    .--() {@colorkey: #000} .--;
}

用法：

.my-div {
     .colorkey(~"black");
     color: @colorkey
}

但是我更喜欢像这样使用mixin：

.colorkey(black);

没有引号和波浪号。 是否可以修改colorkey mixin来实现这一目标？

谢谢！

Answer 1

如果你的@colors可以定义而不将颜色名称放在~"..." ，你只需做一个小改动：

@colors: black #000, white #fff, blue #008FD6, bluehover #44A1E0, grayborder #DBDBDB;

.colorkey(@key:black) {
    .-(length(@colors));
    .-(@i) when (@key = extract(extract(@colors, @i), 1)) {
        @colorkey: extract(extract(@colors, @i), 2);
    }
    .-(@i) when (@i > 0) {.-(@i - 1)}
}

.my-div {
     .colorkey(bluehover);
     color: @colorkey
}

请注意我

• .-(@i) when (@i > 0)删除.-(@i) when (@i > 0)的额外括号集
• 将递归调用移动到.colorkey的结尾，并且
• 放弃你的.--() {@colorkey: #000} .--; 并使用.colorkey(@key:black) { 。 （我的猜测应该是.colorkey; color: @colorkey评估color: #000但实际上它没有做任何事情:)在你提供的代码中，要定义默认你需要做的事情.colorkey(@key: ~"black") { ）