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

除非你期望嵌套表或实例只想要定位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;
}

Answer 2

我建议：

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

}

怎么样？

有没有办法缩短css选择器？

2 个答案: