1

我有以下颜色定义数组：

@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 来实现这一点？

4

1 回答 1

0

如果您@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但实际上它没有做任何事情:) 在您提供的代码中，定义您需要而不是做的默认值.colorkey(@key: ~"black") {）
于 2016-09-12T16:27:07.310 回答