Меньше css гнездование?

Question

У меня есть некоторые проблемы с гнездованием меньше, вот мое меньше

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

но мне нужно положить все эти правила только о ne смешивание? сформировать все мои правила сделать только одно правило смешивания

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