& Quot; Цитирование & Quot; переменная аргумента в LESS mixin

Question

& Quot; Цитирование & Quot; переменная аргумента в LESS mixin

У меня есть следующий массив определений цвета:

@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 для достижения этой цели?

Спасибо!

1

css css-preprocessor less lessphp php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Если твой @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") { )

0