Existe-t-il un moyen de raccourcir le sélecteur CSS?

Question

J'utilise SCSS. J'ai des tables dont les largeurs de colonne et les alignements de texte doivent être spécifiés. En ce moment, j'ai un tas de sélecteurs CSS comme ceci:

.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: /* ...*/} 
    ... 
    } 
} 

est-il un moyen de simplifier l'utilisation de certaines fonctionnalités SCSS pour que je ne dois pas répéter l'écriture &>colgroup>col, &>tbody>tr>td> et >*? Est-il possible d'appliquer une fonction de sélecteurs de css pour que je puisse écrire quelque chose comme ceci:

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

Answer 1

je suggère:

.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 */} 
    } 
    } 

} 

Qu'en est-il?

Answer 2

Sauf si vous prévoyez d'avoir des tables imbriquées ou des instances où vous ne souhaitez cibler que les colonnes situées dans des colgroups (et non à l'extérieur), vous avez beaucoup de redondances.

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

Génère:

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

Ou ...

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

Génère:

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