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)
将递归调用移至.colorkey和
放弃了您的.--() {@colorkey: #000} .--;，并使用了.colorkey(@key:black) {。（我的猜测是应该让.colorkey; color: @colorkey评估为color: #000，但实际上它没有做任何事情:)在您提供的代码中，要定义默认值，您需要执行{{} 1}}）

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

1 个答案: