Как реализовать динамические переменные в цикле LESS?

Question

[Алексей Николаев]

Доброго дня всем.
Суть проблемы: есть генерируемый при помощи spritesmith (я использую gulp) спрайт иконок. Конечный файл представляет собой less-файл со всеми необходимыми переменными и миксинами. Пример:

@rss-name: rss;
// ... еще много подобных параметров ...
@rss: 24px 48px -24px -48px 24px 24px 93px 72px '../images/sprite.png' rss;

// ... опустим второстепенные миксины ...

.sprite(@sprite) {
  .sprite-image(@sprite);
  .sprite-position(@sprite);
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

При помощи миксина .sprite можно подмешивать стили конкретной иконки к конкретному классу. У меня все иконки носят название типа "icon-icon_name", например, icon-rss. Сейчас я пытаюсь в цикле сделать так, чтобы less автоматически генерировал css для всех имеющихся у меня классов иконок:

@icon-list: @twitter-name, @rss-name;

.icon-loop(@index: 1) when (@index <= length(@icon-list)) {
  @item: extract(@icon-list, @index);

  .icon-@{item} {
    .sprite(@{item}); // Внимание на эту строчку - тут должна произойти магия
  }

  .icon-loop(@index + 1);
}

.icon-loop();

Суть в том, что на строке с "магией" конструкция @{item} должна отослать less на переменную, содержащую всю инфу об иконке, например, @rss. Но вместо этого я получаю ошибку о недопустимом символе, в то время как строчка выше (где происходит формирование класса работает). Как сделать то, что я пытаюсь сделать, возможно, мой подход неверен?

Буду благодарен за советы, спасибо.

Answer 1

[Николай Шабалин]

Про LESS не скажу.
Тоже использую spritesmith, но только для sass.
В sass делаю так

$icons-list: 'vk', 'email', 'map', 'link', 'phone';

@each $icons in $icons-list {
    .b-icon_img_#{$icons} {
        @include sprite($icons);
    }
}

Возможно поможет для переноса для LESS