Question

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

然而，并非所有CSS都使用mixin。

在bootstrap文件中，.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 here：

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

另请参阅：Less inherit "virtual" class

Bootstrap Mixins - 不能使用.panel-heading

1 个答案: