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?

CoderPi · Accepted Answer · 2016-01-13 17:20:14Z

2

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

answered Jan 13, 2016 at 17:20

CoderPi

13.2k4 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to inherit CSS using Less?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related