0

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

2 に答える 2

2

ネストされたテーブルまたはcolgroup内にある（外部ではない）colのみをターゲットにするインスタンスがあることを期待していない限り、多くの冗長性があります。

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;
}
于 2013-01-12T00:14:33.820 に答える
0

私は提案します：

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

}

どうですか？

于 2013-01-12T00:06:24.447 に答える