Sass nth-child nesting

Я пересматриваю эти CSS-селектора до Sass:

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

... и придумал следующее:

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

К сожалению, это вызывает ошибку:

Недопустимый CSSS после "&": ожидаемый "{", был "(2), & (4), & (6) {"

Я также знаю, что это может быть лучше, потому что я:

повторение цвета фона
повторяющиеся числа - т.е. (2) и (6)

Как мне реорганизовать эти селектора?

Ответ 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}
      }
  }
}