Build list of selectors with LESS

As already mentioned your attempt is almost there, it does not work because of variable visibility rules. Notice that each .selector-list iteration defines new @selector-list variable which have higher precedence in the current scope but does not override @selector-list variables for the outer scope (i.e. scopes of the previous .selector-list iterations and above). So when you use @selector-list after the initial .selector-list call you get the value set in the "highest" .selector-list iteration (i.e. the first one with @i = 1).

To "return" a value from the last iteration of a recursive loop you need to define a variable with this value only within that last iteration. Usually the simplest way to do this is to provide a "terminal" mixin (i.e. a specialization for the last call of the recursive mixin). In fact you would need such terminal anyway to handle the final comma of the list. E.g.:

#1

.selector-list(@parent, @children, @i: 1, @list: "") when (@i < length(@children)) {
    @child: extract(@children, @i);
    .selector-list(@parent, @children, (@i + 1), "@{list} @{parent} @{child},");
}

.selector-list(@parent, @children, @i, @list) when (@i = length(@children)) {
    @child: extract(@children, @i);
    @selector-list: e("@{list} @{parent} @{child}");
}

// usage:

@text-elements: p, ul, ol, table;

.selector-list("body.single .entry-content", @text-elements);
@{selector-list} {
    line-height: 1.8;
}

-

#2 Same as above just slightly "optimized":

.selector-list(@parent, @children, @i: length(@children), @list...) when (@i > 1) {
    .selector-list(@parent, @children, (@i - 1),
        e(", @{parent}") extract(@children, @i) @list);
}

.selector-list(@parent, @children, 1, @list) {
    @selector-list: e(@parent) extract(@children, 1) @list;
}

// usage:

@text-elements: p, ul, ol, table;

.selector-list("body.single .entry-content", @text-elements);
@{selector-list} {
    line-height: 1.9;
}

-

#3 Speaking of the use-case in general, a "string-based selector manipulation" is not always a good idea in context of Less. The main problem is that Less does not treat such strings as "native" selectors and most of advanced Less features won't work with them (e.g. Less won't recognize ,, & and similar elements there so such rules can't be nested, extend also can't see such selectors etc. etc.). An alternative, more "Less-friendly" approach is to define such list as a mixin rather than a variable, e.g.:

.text-elements(@-) {p, ul, ol, table {@-();}}

body.single .entry-content { 
    .text-elements({
        line-height: 1.8;
    });
}

and (when you also need to reuse body.single .entry-content /.text-elements/):

.text-elements(@-) {
    p, ul, ol, table 
        {@-();}}

.selector-list(@-) {
    body.single .entry-content {
        .text-elements(@-);
    }
}

.selector-list({
    line-height: 1.9;
});

etc.

-

P.S. Also, speaking in even more general, don't miss that in Less a media query may be put into selector ruleset, so depending on a use-case it's also often more easy to write a list of selectors once and set media depended styles inside it (i.e. doing it in opposite to the standard CSS method where you have to repeat same selector(s) for each media query).


This is fairly close. Needs a little tweaking to get it exactly right, but certainly a good start.

The problem with your attempt is that LESS does not like overwriting the same variables and it will produce an error. This is because variables are constants in LESS.

LESS

@text-elements: p, ul, table;

.selector-list(@el,@t1) {
  @selector-list: ~"@{t1}, body.single .entry-content @{el}";
}

.selector-list(@index, @elements, @t1) when (@index > 1) {
  @el: extract(@elements, @index);
  @t2: "@{t1}, body.single .entry-content @{el}";
  .selector-list(@elements,@t2);
}

.selector-list(@elements) {
  @num: length(@elements);
  @el: extract(@elements, @num);

  @t2: "body.single .entry-content @{el}";
  .selector-list((@num - 1), @elements, @t2);
}

.selector-list(@text-elements);
@{selector-list} { content: 'Bacon'; }

Output

body.single .entry-content table, 
body.single .entry-content ul, 
body.single .entry-content p, ul, table {
   content: 'Bacon';
}

I got most of this from this SO answer; Concatenate string in less in loop