使用 Less 在面板上应用文本危险时创建默认样式

Question

所以我是使用Less文件来改进我的CSS的新手，我目前有一个面板。

我正在寻找某种方式使它，以便每当文本危险类应用于面板div时，它将font-color更改为白色而不是红色。

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) 
{
    border-color: @border;
    & > .panel-heading {
        color: @heading-text-color;
        background-color: @heading-bg-color;
        border-color: @heading-border;
        + .panel-collapse > .panel-body {
            border-top-color: @border;
        }
        .badge {
            color: @heading-bg-color;
            background-color: @heading-text-color;
        }
    }
    & > .panel-body {
        color: @gray-dark;
        + .text-danger {
            color: @heading-text-color;
        }
    }
    & > .panel-footer {
        + .panel-collapse > .panel-body {
            border-bottom-color: @border;
        }
    }
}

以上是我在Less文件中使用的代码，我做错了什么?

如果有帮助的话，HTML应该是这样的:

<div class="panel panel-body text-danger"> ERROR! </div> 

Answer 1

根据注释中给出的HTML，所有这三个类都应用于同一个元素，而不是不同的兄弟元素或子元素。因此你的Less代码应该修改如下:

修改后的Less:(为了保持简单，我省略了其他部分)

&.panel-body {
  color: #777;
  &.text-danger {
    color: @heading-text-color;
  }
}
/* mixin call */
.panel{ 
  .panel-variant(1px; #fff; #0f0; #00f);
}

编译后的CSS输出:

.panel.panel-body.text-danger {
  color: #ffffff;
}

---

您的原始Less代码具有后代选择器(用于.panel-body)和相邻的兄弟选择器(+)，用于.text-danger，并且仅当标记如下时才会工作:

相邻兄弟选择器(+)仅在标记如下时起作用:

<div class='panel'>
  <div class='panel-heading'>Heading</div>
  <div class='panel-body'>Body</div>
  <div class='text-danger'>Some alert text</div>
</div>