Sass nth-child nesting

Ответ 1

Я был бы осторожен, пытаясь стать слишком умным здесь. Я думаю, что это сбивает с толку, и использование более продвинутых параметров 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

Вы пытаетесь сделать &(2), &(4), который не будет работать

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