Bootstrap Mixins - 不能使用.panel-heading

Question

我正在尝试使用.panel-heading作为混合内部的一些自定义LESS我正在使用Bootstrap框架工作.

然而,并非所有的CSS都使用mixin.

在引导文件中,.panel-heading有以下定义:

.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;
    }
  }
  & > .panel-footer {
    + .panel-collapse .panel-body {
      border-bottom-color: @border;
    }
  }
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  .border-top-radius(@panel-border-radius - 1);
}

当我执行以下操作时:

.panel {
    .panel-default;

    header {
        .panel-heading;
    }
}

只有color,background-color并且border-color被拉过来.有什么想法发生了什么？

HTML在这里:

<div class="panel">
    <header><h4><a>Header</a></h4></header>
    <div class="collapse in">
        <div>

        </div>
    </div>
</div>

Answer 1

.panel {
     &:extend(.panel-default all);

    header {
        &:extend(.panel-heading all);
    }
}

另请参阅:少继承"虚拟"类