Генерация классов с помощью less

Вопрос-ответ Остальное
1

Добрый день.
Прошу помочь мне с решением одной задачи на less уже весь мозг сломал.
https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/chapter_5/homework.html

Есть тут люди разбирающийся в less?

2

Нужно построить решение на основе Loop цикла в LESS.

Я легко нагуглил аналогичную задачу с детальным описанием решения на английском: http://webdesign.tutsplus.com/tutorials/understanding-the-less-loop--cms-23827

Вот по аналогии сделал ваше решение:

@listNames: black, red, purple, green, blue;
@listColors: #000000, #ff0000, #800080, #008000, #0000ff;

.color-variation(@names; @colors; @index) when (iscolor(extract(@colors, @index))) and (@index > 0) {
    .color-variation(@names; @colors; (@index - 1)); // decrement.
 
  @name  : extract(@names, @index);
  @color : extract(@colors, @index);
 
  .color-@{name} { color: @color; }
}

.color-variation(@listNames, @listColors, 5);

Результат:

.color-black {
  color: #000000;
}
.color-red {
  color: #ff0000;
}
.color-purple {
  color: #800080;
}
.color-green {
  color: #008000;
}
.color-blue {
  color: #0000ff;
}
3

Чел, ты нереально крут. Спасибо буду разбираться!