How to specify sibling selector in Less in short way?

Question

I have the following less rule:

.menu-link {
     & + .menu-link {
        border-left: 1px solid #000;
     }
}

It work fine but looks ugly because if my menu-link class get changed than I need to replace it two places.

Is there way to simplifying the rule above?

Answer 1

LESS - Parent Selectors

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector.

Since & represents the parent, you could simply use & + &:

.menu-link {
     & + & {
        border-left: 1px solid #000;
     }
}

..which compiles to:

.menu-link + .menu-link {
  border-left: 1px solid #000;
}

---

As a side note, & refers to the entire parent selector. Thus, if you were to use the following:

.parent {
  .menu-link {
    & + & {
      border-left: 1px solid #000;
    }
  }
}

..it would compile to the undesired result of:

.parent .menu-link + .parent .menu-link {
  border-left: 1px solid #000;
}

Therefore you would need to keep your selectors simple and use

.menu-link {
     & + & {
        border-left: 1px solid #000;
     }
}