如何使用＆amp ;;在列表中为一个特定选择器嵌套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

是的，你可以使用nth-child。

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