Sass n子嵌套

我会在这里变得聪明一点时要小心。我认为它确实令人困惑，使用更高级的nth-child参数只会使其变得更加复杂。至于背景色，我只是将其设置为变量。

在我意识到尝试变得太聪明可能不是一件坏事之前，我想出了什么。

#romtest {
 $bg: #e5e5e5;
 .detailed {
    th {
      &:nth-child(-2n+6) {
        background-color: $bg;
      }
    }
    td {
      &:nth-child(3n), &:nth-child(2), &:nth-child(7) {
        background-color: $bg;
      }
      &.last {
        &:nth-child(-2n+4){
          background-color: $bg;
        }
      }
    }
  }
}

这是一个快速演示：http : //codepen.io/anon/pen/BEImD

- - 编辑 - -

这是避免重新键入的另一种方法background-color：

#romtest {
  %highlight {
    background-color: #e5e5e5; 
  }
  .detailed {
    th {
      &:nth-child(-2n+6) {
        @extend %highlight;
      }
    }

    td {
      &:nth-child(3n), &:nth-child(2), &:nth-child(7) {
        @extend %highlight;
      }
      &.last {
        &:nth-child(-2n+4){
          @extend %highlight;
        }
      }
    }
  }
}

你现在要做的&(2), &(4)，这将无法正常工作

#romtest {
  .detailed {
    th {
      &:nth-child(2) {//your styles here}
      &:nth-child(4) {//your styles here}
      &:nth-child(6) {//your styles here}
      }
  }
}