有沒有辦法縮短CSS選擇器？

Question

我正在使用SCSS。我有表的列寬和文本對齊將被指定。現在，我有這樣一羣CSS選擇器：

.some-table-class{ 
    &>colgroup>col{ 
    &:nth-child(1){width: /* some value */} 
    &:nth-child(2){width: /* ... */} 
    ... 
    } 
    &>tbody>tr>td{ 
    &:nth-child(1)>*{text-align: /* some value */} 
    &:nth-child(2)>*{text-align: /* ...*/} 
    ... 
    } 
} 

有沒有辦法簡化這個使用SCSS的一些功能，這樣我就不必重複書寫&>colgroup>col，&>tbody>tr>td>和>*？是否有一個函數應用於CSS選擇器，這樣我可以寫這樣的一種方式：

some_function(.some-table-class){ 
    &:nth-child(1){width: /* some value */, text-align: /* some value */} 
    &:nth-child(2){width: /* ... */, text-align: /* ...*/} 
} 

Answer 1

我建議：

.some-table-class { 

    > colgroup > col 
    @for $i from 1 through N { 
     &:nth-child($i) {width: /* some value */} 
    } 
    } 

    > tbody > tr > td { 
    @for $i from 1 through N { 
     &:nth-child($i) > * {text-align: /* some value */} 
    } 
    } 

} 

怎麼樣？

Answer 2

除非您希望擁有嵌套表格或實例，而您只希望定位colgroups（而不是外部）中的cols，那麼您就有很多冗餘。

table.test { 
    // must the col appear within a colgroup? 
    col { 
     $i: 1; 
     @each $w in (10em, 5em, 10em, 20em, 15em) { 
      &:nth-child(#{$i}) { 
       width: $w; 
      } 
      $i: $i + 1; 
     } 
    } 

    // a td can't appear outside of a tr 
    tbody td { 
     $i: 1; 
     @each $a in (left, left, center, right, left) { 
      // is the alignment only for direct descendants of the td necessary? 
      &:nth-child(#{$i}) { 
       text-align: $a; 
      } 
      $i: $i + 1; 
     } 
    } 
} 

生成：

table.test col:nth-child(1) { 
    width: 10em; 
} 

table.test col:nth-child(2) { 
    width: 5em; 
} 

table.test col:nth-child(3) { 
    width: 10em; 
} 

table.test col:nth-child(4) { 
    width: 20em; 
} 

table.test col:nth-child(5) { 
    width: 15em; 
} 

table.test tbody td:nth-child(1) { 
    text-align: left; 
} 

table.test tbody td:nth-child(2) { 
    text-align: left; 
} 

table.test tbody td:nth-child(3) { 
    text-align: center; 
} 

table.test tbody td:nth-child(4) { 
    text-align: right; 
} 

table.test tbody td:nth-child(5) { 
    text-align: left; 
} 

或者......

$list: 10em left, 5em left, 10em center, 20em right, 15em left; 

table.test { 
    // must the col appear within a colgroup? 
    $i: 1; 
    @each $child in $list { 
     col { 
      &:nth-child(#{$i}) { 
       width: nth($child, 1); 
      } 
     } 

     // a td can't appear outside of a tr 
     tbody td { 
      // is the alignment only for direct descendants of the td necessary? 
      &:nth-child(#{$i}) { 
       text-align: nth($child, 2); 
      } 
     } 
     $i: $i + 1; 
    } 
} 

生成：

table.test col:nth-child(1) { 
    width: 10em; 
} 

table.test tbody td:nth-child(1) { 
    text-align: left; 
} 

table.test col:nth-child(2) { 
    width: 5em; 
} 

table.test tbody td:nth-child(2) { 
    text-align: left; 
} 

table.test col:nth-child(3) { 
    width: 10em; 
} 

table.test tbody td:nth-child(3) { 
    text-align: center; 
} 

table.test col:nth-child(4) { 
    width: 20em; 
} 

table.test tbody td:nth-child(4) { 
    text-align: right; 
} 

table.test col:nth-child(5) { 
    width: 15em; 
} 

table.test tbody td:nth-child(5) { 
    text-align: left; 
}