薩斯第n個孩子築巢

Question

我到薩斯重構這些CSS選擇器：

#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;   
     } 
    } 
} 

不幸的是，這是拋出一個錯誤：

Invalid CSSS after "&": expected "{", was "(2), &(4), &(6) {"

我也知道這可能會更好，因爲我是：

• 重複的背景顏色
• 重複號碼 - 即（2）和（6）

我應該如何重構這些選擇？

Answer 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; 
     } 
     } 
    } 
    } 
} 

Answer 2

你'正在嘗試做&(2), &(4)哪些行不通

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