Feature request: 'or' combinator

[10xLaCroixDrinker]

In addition to the & combinator, an 'or' combinator would be very useful.

for example:

.parent .child {
  |.sibling {
    color: red;
  }
  background: blue;
  || {
    border: none;
  }
}

would compile to:

.parent .child, .sibling {color: red;}
.parent .child {background: blue;}
.parent, .child {border: none;}

[matthew-dean]

Your examples don't quite make sense. The .child element is treated both as a descendant of .parent and something like a sibling... .or maybe just an element with similar properties.

In any case, this should be covered by two different approaches in LESS.

For one, you can use the & symbol in lots of interesting ways, like this:

.parent {
  &, .child { background: blue; }
  .child {
    &, .sibling {
      color: red;
    }
    background: blue;
  }
}

Secondly, the upcoming :extend syntax should cover some other patterns / joins.

Because of that, I'd say probably this doesn't add much value.

[10xLaCroixDrinker]

.parent {
  &, .child { background: blue; }
}

will result in:

.parent,
.parent .child {
  background: blue;
}

not:

.parent, .child {
  background: blue;
}

However, if it did, that would be a good solution.

[gustavohenke]

Dude, you are misunderstooding how Less works :D
If you want that output, you should write it directly...

[lukeapage]

Being able to break out of the current scope has come up before, so its a
valid request. I can see how you might want to group things but have a
scope exception. Unfortunately &, has a valid meaning (child and parent).
I'm not sure I like the look of bar.. I can see the programming link, but
not the css link.

[matthew-dean]

Oh, right, I forgot that a comma created another combinator.

In THAT case, how about this incredibly awesomely ugly hack? ;-)

@child: ~", .child";
.parent {
  &@{child} { background: blue; }
}

[matthew-dean]

But, yes, to echo @agatronic, in terms of syntax, a lot of people suggest programming-like syntax or patterns, especially JavaScript, but even though the parser is in JavaScript, the patterns and syntax of LESS are derived from and should match CSS as much as possible.

Based on the incredible hackishness of my solution, it does leave it open for debate, but your examples do still feel a bit weird to me. I think the only thing "&" really failed to do was append everything that followed, including the comma. Instead, it just operates on that selector, and the comma creates a new combination.

[10xLaCroixDrinker]

@agatronic What would be better than the pipe?

@MatthewDL I made the double-pipe example to match use of the ampersand. The example with the single pipe is really what I'm looking for.

[lukeapage]

double pipe doesn't make sense to me.

Closing this and would like to include this feature set in the fix for #1075, taking either of @MatthewDL's suggestions of \ or &(0)

Please comment on that bug if you'd like