如何使用 Less 继承 CSS？

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

我的方法是用固定的 width/height 定义一个 DIV 并为它分配一个在 Less 文件中定义的 class，其中 DIV 的 class继承上面 CSS 中定义的颜色。

我还不明白的是如何对 LESS 编译器说："take properties from .table > tbody > tr > td.warning and insert into here"?

可能吗？

Answer 1

您可以在自己的 class 中使用 &: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;
}

如何使用 Less 继承 CSS？

How to inherit CSS using Less?

css

less

twitter-bootstrap-3

less-mixins