如何使用 Less 继承 CSS？答案

【问题标题】：How to inherit CSS using Less?如何使用 Less 继承 CSS？
【发布时间】：2016-04-18 18:38:49
【问题描述】：

我正在尝试在 <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 获取属性并插入到这里”？

有可能吗？

【问题讨论】：

标签： css twitter-bootstrap-3 less less-mixins

【解决方案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;
}

【讨论】：