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

Question

我有以下 less 规则：

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

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

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

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.

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

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

..编译为：

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

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

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

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

How to specify sibling selector in Less in short way?

css

less