如何使用 & 在列表中嵌套一个特定选择器的 scss 规则

Question

我有一个问题，我在文档中或搜索堆栈溢出时找不到。

这不是最好的例子，但它会给你我试图完成的要点。

例

.btn-group { 
.btn { 
font-size: 1.2em;
background: dodgerblue;
color: white;
padding: 10px 20px;
border-radius: 6px;
&.btn-danger {
background-color: red;
}
&.btn-primary {
background-color: blue; 
}
&.btn-primary, &.btn-danger {
box-shadow: 1px solid black;
&[0] {
border: 10px solid black;
}
}
}
}

有没有办法只选择列表中的一个元素？也许使用数组符号或类似的东西？

这行不通，但你可以看到我想要完成什么。

演示：https://codepen.io/anon/pen/awjeON

真实世界的例子

.bounce {
.ng-leave {
display: none; 
}
.ng-enter, .ng-leave {
position: relative;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
} 

Answer 1

是的，你可以使用第 n 个孩子。

&:nth-child(1) {
border: 2px solid grey;
}