如何以较短的方式指定兄弟选择器？

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