2013-12-10 85 views
13

我到薩斯重構這些CSS選擇器:薩斯第n個孩子築巢

#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)

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

回答

24

我會小心的試圖在這裏變得太聰明。我認爲這很讓人困惑,而使用更高級的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} 
     } 
    } 
}