How to inherit CSS using Less?

Question

I am trying to create a legend below <table> where colors match those defined in Bootstrap stylesheets e.g.:

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

My approach is to define a DIV with fixed width/height and assign it a class defined in Less file where the DIV's class inherits color defined in the CSS above.

What I don't understand yet is how can I say to LESS compiler: "take properties from .table > tbody > tr > td.warning and insert into here"?

Is it possible?

Answer 1

You can use &:extend(.table > thead > tr > td.warning); inside your own class to inherit from that Element:

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