«Цитирование» переменная аргумент в МЕНЬШЕ 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 
} 

Однако я предпочел бы использовать подмешать так:

.colorkey(black); 

Без кавычек и тильды. Можно ли модифицировать смесь colorkey для достижения этого?

Спасибо!

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, но на самом деле это было не делать ничего :) В коде вы предусмотрели, чтобы определить, что по умолчанию вам нужно вместо того, чтобы сделать .colorkey(@key: ~"black") {)