如何以较少的方式在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;
     }
}

Answer 2

Josh Crozier的回答很好，但是在.vue文件中并且样式范围是无效的。