Less css nesting?

Question

I have some issues with nesting in Less, here is my 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;
            }
        }
    }
}

All working fine, but i have more two rules to add, but i have tried but no luck, only way is to make them seperate, but i dont want that, i want nest this two rules inside one

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


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

This compiled 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;
}

But i need to put all those rules in just one mixing? form all my rules to make just one mixing rule

Answer 1

The below is the most (to my knowledge) that you could re-factor or reduce this code and make it part of the same nested structure.

Basically, all that I have done is group all selectors which have similar properties/rulesets and similar selector hierarchy together. For selectors where the properties/rulesets are same but the hierarchy is a bit different, we could use the :extend feature. The advantage is that when you make any change to the list of properties (or rulesets) used by the base, the list of properties assigned to the selector which is extending the base will also be updated and thereby avoid the need to overwrite in all places.

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

Answer 2

If I correctly understood your problem, here the code the should solve your problem:

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