css - 如何在 Less 中以简短的方式指定兄弟选择器？

Question

我有以下 less 规则:

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

它工作正常但看起来很丑，因为如果我的 menu-link 类发生变化，我需要将它替换两个地方。

有没有办法简化上面的规则？

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.

由于 & 代表父级，您可以简单地使用 & + &:

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

..编译为:

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

---

作为旁注，& 指的是整个父选择器。因此，如果您要使用以下内容:

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

..它会编译成不希望的结果:

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

因此你需要保持你的选择器简单易用

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