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

如何使用Less继承CSS？

1 个答案: