How to specify sibling selector in Less in short way?

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?


solution

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;
  }
}