less - LESS 嵌套规则 &

Question

由于评论，我补充说.vmiddle, .vmiddle td, .vmiddle th这在我的情况下不起作用，因为我使用的是引导程序，它定义.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td为 vertical-align: top;

优先。

我想执行这个 css：

.vmiddle,
table.vmiddle thead tr td,
table.vmiddle tfoot tr td,
table.vmiddle tbody tr td,
table.vmiddle thead tr th,
table.vmiddle tfoot tr th,
table.vmiddle tbody tr th,
table thead.vmiddle tr td,
table tbody.vmiddle tr td,
table tfoot.vmiddle tr td,
table thead.vmiddle tr th,
table tbody.vmiddle tr th,
table tfoot.vmiddle tr th,
table thead tr.vmiddle td,
table tbody tr.vmiddle td,
table tfoot tr.vmiddle td,
table thead tr.vmiddle th,
table tbody tr.vmiddle th,
table tfoot tr.vmiddle th,
table thead tr td.vmiddle,
table thead tr th.vmiddle,
table tbody tr td.vmiddle,
table tbody tr th.vmiddle,
table tfoot tr td.vmiddle,
table tfoot tr th.vmiddle {
  vertical-align: middle;
}

不知何故，我让它与这个规则一起工作：

.vmiddle {
    vertical-align:middle;
    & {
        table& {
            & thead , tfoot, tbody {
                tr, {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        thead&, tbody&, tfoot& {
            table & {
                tr {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        tr& {
            thead &, tbody &, tfoot & {
                table & {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        td&, th& {
            tr & {
                thead &, tbody &, tfoot & {
                    table & {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

但看起来实际上比标准解决方案更复杂：D 有没有更短的方法可以做到这一点并且没有定义 vertical-align:middle 5 次？

score 2 · Accepted Answer

看起来您没有正确使用“&”选择器。

来自lesscss.org：

& 组合器 - 当您希望将嵌套选择器连接到其父选择器时使用它，而不是充当后代。这对于像 :hover 和 :focus 这样的伪类尤其重要。

例如：
.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}
将输出
.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

但是在您的情况下，您甚至不需要使用它。

编辑：

关于特异性问题（在下面的评论中提到）只需在根（表）元素上添加一个类，特异性问题就会消失。因此，如果我们调用 calss .table：

较少的：

.table .vmiddle
{
   vertical-align: middle;
   td, th
   {
     vertical-align: middle;
   }
}

score 2 · Accepted Answer

在大多数情况下，您应该能够缩短那些长 css 规则。在某些情况下它不起作用，但通常你应该避免不必要的长选择器以获得更好的性能和可读性。有条不紊地减少规则的示例：

任何thead, tbody, tfoot, tr,th和td将始终在表格中，您可以删除table选择器部分。

.vmiddle,
.vmiddle thead tr td,
.vmiddle tfoot tr td,
.vmiddle tbody tr td,
.vmiddle thead tr th,
.vmiddle tfoot tr th,
.vmiddle tbody tr th,
thead.vmiddle tr td,
tbody.vmiddle tr td,
tfoot.vmiddle tr td,
thead.vmiddle tr th,
tbody.vmiddle tr th,
tfoot.vmiddle tr th,
thead tr.vmiddle td,
tbody tr.vmiddle td,
tfoot tr.vmiddle td,
thead tr.vmiddle th,
tbody tr.vmiddle th,
tfoot tr.vmiddle th,
thead tr td.vmiddle,
thead tr th.vmiddle,
tbody tr td.vmiddle,
tbody tr th.vmiddle,
tfoot tr td.vmiddle,
tfoot tr th.vmiddle {
  vertical-align: middle;
}

Any tr, thandtd将始终位于 a或中thead，您可以删除它们。许多规则现在是相同的，也删除它们。tbodytfoot

.vmiddle,
.vmiddle tr td,
.vmiddle tr th,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle th,
tr.vmiddle th,
tr.vmiddle th,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle {
  vertical-align: middle;
}

Any thandtd将永远是 a 的子级tr，remove tr。再次删除所有重复项。

.vmiddle,
.vmiddle td,
.vmiddle th,
td.vmiddle,
th.vmiddle {
  vertical-align: middle;
}

td.vmiddle并且th.vmiddle已经被.vmiddle.

.vmiddle,
.vmiddle td,
.vmiddle th {
  vertical-align: middle;
}

less - LESS 嵌套规则 &

2 回答 2

Related

Reference