Как наследовать CSS, используя Less?

Question

Я пытаюсь создать легенду ниже <table> где цвета соответствуют тем, которые определены в Bootstrap стилей например:

.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { 
    background-color: #fcf8e3; 
    border-color: #fbeed5; 
} 

Мой подход заключается в определении DIV с фиксированной ширины/высоты и присвоить ему класс, определенный в Less файле где класс DIV наследует цвет, определенный в CSS выше.

Что я еще не понимаю, как я могу сказать компилятору LESS: «Возьмите свойства от .table > tbody > tr > td.warning и вставьте сюда»?

Возможно ли это?

Answer 1

Вы можете использовать &:extend(.table > thead > tr > td.warning); внутри ваш собственный класс наследовать от этого элемента:

View the CSS output on LESS Playground

.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { 
    background-color: #fcf8e3; 
    border-color: #fbeed5; 
} 

div { 
    &:extend(.table > thead > tr > td.warning); 
    color: blue; 
}