少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

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

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

Answer 2

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

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

Possible drawback is that in future if you want to assign different property list for them then you have to rework the structure. So, choose the grouping or use of extend accordingly.

.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){};
}

少css嵌套？

Less css nesting?

css

less

mixins

nested