How to implement dynamic variables in LESS loop?

Question

css

Good day everyone.
The essence of the problem: there is an icon sprite generated with the help of spritesmith (I use gulp). The final file is a less file with all the necessary variables and mixins. Example:

@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);
}

With the .sprite mixin, you can mix in the styles of a particular icon with a particular class. All my icons are named like "icon-icon_name", for example, icon-rss. Now I'm trying in a loop to make less automatically generate css for all the icon classes I have:

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

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

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

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

.icon-loop();

The bottom line is that on the line with "magic" the @{item} construction should send less to a variable containing all the information about the icon, for example, @rss. But instead I get an error about an invalid character, while the line above (where the class generation happens works). How to do what I'm trying to do, maybe my approach is wrong?
I would be grateful for advice, thanks.

Answer 1

I won't say anything about LESS.
I also use spritesmith, but only for sass.
I do this in sass

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

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

May help to port for LESS