Question

我在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功能。优点是当您对基础使用的属性（或规则集）列表进行任何更改时，分配给扩展基础的选择器的属性列表也将更新，从而避免在所有位置覆盖的需要。

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

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

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

减少css嵌套？

2 个答案: