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

Question

我有以下较少的规则:

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

它工作正常,但看起来很难看,因为如果我的menu-link班级改变了,我需要更换两个地方.

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

Answer 1

少 - 父选择者

的&操作者表示嵌套规则的父选择器和施加改性类或伪类到现有的选择器时是最常用的.

既然&代表了父母,你可以简单地使用& + &:

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