如何在Less中指定兄弟选择器？

Question

我有以下规则：

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

它运行正常，但看起来很难看，因为如果我的menu-link类发生了变化，我需要将它替换为两个位置。

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

Answer 1

  

LESS - Parent Selectors

     

&运算符表示嵌套规则的父选择器，在将修改类或伪类应用于现有选择器时最常用。

由于&代表父级，因此您只需使用& + &：

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