更少的css嵌套？

Question

我对在 Less 中的嵌套有一些问题，这是我的 less

.edit-qa-table {
    thead {

        tr {
            th:first-child + th {
                text-align: center;
            }
        }

        tbody {

            tr {
                th:first-child + th {
                    text-align: center;
                }
            }
        }

        .thead-append {
            th:first-child {
                width: 45%;
            }
            &:first-child + th + th{
                min-width:130px;
            }
        }
    }
}

一切正常，但我还有两个规则要添加，但我尝试过但没有运气，唯一的方法是让它们分开，但我不想那样，我想将这两个规则嵌套在一个中

 .edit-qa-table > tbody > tr > td:first-child + td{
     text-align:center;
 }


.edit-qa-table{
    tbody{
        tr{
            td{
                vertical-align:middle;
            }
        }
    }
} 

这个编译的 CSS

.edit-qa-table thead tr th:first-child + th {
  text-align: center;
}
.edit-qa-table thead tbody tr th:first-child + th {
  text-align: center;
}
.edit-qa-table thead .thead-append th:first-child {
  width: 45%;
}
.edit-qa-table thead .thead-append:first-child + th + th {
  min-width: 130px;
}
.edit-qa-table > tbody > tr > td:first-child + td {
  text-align: center;
}
.edit-qa-table tbody tr td {
  vertical-align: middle;
}

但是我需要把所有这些规则都放在一个混合中吗？形成我所有的规则，只做一个混合规则

Answer 1

以下是（据我所知）您可以重构或减少此代码并使其成为同一嵌套结构的一部分的最多内容。

基本上，我所做的只是将所有具有相似属性/规则集和相似选择器层次结构的选择器组合在一起。对于属性/规则集相同但层次结构略有不同的选择器，我们可以使用:extend 功能。优点是当您对基础使用的属性列表（或规则集）进行任何更改时，分配给扩展基础的选择器的属性列表也将被更新，从而避免在所有地方都需要覆盖.

可能的缺点是，将来如果您想为它们分配不同的属性列表，那么您必须重新设计结构。因此，请相应地选择分组或使用extend。

.edit-qa-table{
    thead {
        tr, tbody tr{
            th:first-child + th{
                text-align: center;
            }
        }
        .thead-append{
            &:first-child{
                + th + th{
                    min-width: 130px;
                }
            }
            th:first-child{
                width: 45%;
            }
        }
    }
    tbody tr td{
        vertical-align: middle;
    }
    > tbody > tr > td:first-child + td:extend(.edit-qa-table thead tr th:first-child + th){};
}

Answer 2

如果我正确理解了您的问题，这里的代码应该可以解决您的问题：

.edit-qa-table {
    thead {

        tr {
            th:first-child + th {
                text-align: center;
            }
        }

        tbody {

            tr {
                th:first-child + th {
                    text-align: center;
                }

        td
        {
          vertical-align:middle;
        &:first-child + td{
     text-align:center;
 }
        }
            }
        }

        .thead-append {
            th:first-child {
                width: 45%;
            }
            &:first-child + th + th{
                min-width:130px;
            }
        }
    }
}

输出 CSS：

.edit-qa-table thead tr th:first-child + th {
  text-align: center;
}
.edit-qa-table thead tbody tr th:first-child + th {
  text-align: center;
}
.edit-qa-table thead tbody tr td {
  vertical-align: middle;
}
.edit-qa-table thead tbody tr td:first-child + td {
  text-align: center;
}
.edit-qa-table thead .thead-append th:first-child {
  width: 45%;
}
.edit-qa-table thead .thead-append:first-child + th + th {
  min-width: 130px;
}