LESS CSS: abusing the & Operator when nesting?

Question

Less uses the & Operator to enhance the possibilities for nesting.

.header        { color: black;
  .navigation  { font-size: 12px;
    &         


        

Answer 1

It's not abuse of the & combinator at all; you can place it anywhere in a nested selector and it'll be substituted with whatever is above it (its so-called parent selector):

[The & combinator is] used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant.

Notice that it says "concatenated"; it doesn't say you can only either prepend or append the parent selector to the nested selector. Concatenation doesn't work in any specific direction only.

Further, the word "descendant" has to do with the nature of nested selectors being treated as though they were linked by the descendant combinator by default. In no way does that inherently limit the use of & to descendants only, nor does it imply that the parent selector has to represent a parent or ancestor element in such a way that the nested selector may only be appended to it, and not prepended or even inserted into the middle of it.