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") { ）