Build list of selectors with LESS

by

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).

More Related Contents:

  1. Why I can see Less instead of CSS in a browser [closed]
  2. How to prevent Less from trying to compile CSS calc() properties?
  3. Disable LESS-CSS Overwriting calc() [duplicate]
  4. Is there a SASS.js? Something like LESS.js?
  5. Using variables in property names in LESS (dynamic properties / property name interpolation)
  6. How to thematize in lesscss
  7. less.js not working in chrome
  8. Double border with different color [duplicate]
  9. import .css file into .less file
  10. What does an “&” before a pseudo element in CSS mean?
  11. Defining Variable Variables using LESS CSS
  12. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  13. Less lists as a mixin argument(s)
  14. LESS CSS: abusing the & Operator when nesting?
  15. How to add different CSS style to every nth element, depending on n using LESS
  16. How do I extend a class/mixin which has dynamically formed selector
  17. LESS: Unrecognized input error when using Bootstrap
  18. LESS mixin a variable class name
  19. Concatenate strings in Less
  20. LESS CSS nesting classes
  21. Does LESS have an “extend” feature?
  22. Less CSS: Mixins with Variable Number of Arguments
  23. Media Query grouping instead of multiple scattered media queries that match
  24. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  25. Why is a flex item limited to parent size?
  26. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  27. CSS: Set a background color which is 50% of the width of the window
  28. How can I prevent CSS gradient banding?
  29. Can I define a class name on paragraph using Markdown?
  30. Media queries and background images

Leave a Comment