继承和层次在少，有什么不对？

Question

为什么当我在层次结构中组合继承时，少而不包括所有属性？

我试图从bootstrap继承.btn元素。以下代码不起作用：

.custom-class-wrapper {
    .custom-class {
        .btn; // Will not inherit all the properties from .btn;
    }
}

以下代码有效：

.custom-class-wrapper {
}
.custom-class {
    .btn; // Will inherit all properties from .btn;
}

Answer 1

据我所知，你的例子中两种方法之间不应该有任何区别。我也同意@harry这两种方法都会生成所有（预期）属性。在上面的评论中，@ seven-phases-max也是正确的，但提到的限制似乎不适用于您的用例。

您应该可以在您的问题中解释哪些属性缺失或哪些属性没有达到预期效果。

请注意，.btn类仅适用于a或button元素。

Bootstrap还定义了.btn中button-groups.less的关系。仅当.btn类已包含在.button-group内时，才会应用这些属性。你的mixin不会继承这些关系。可以使用extend feature修复前面的可能性。另请注意all关键字在扩展功能中的用法。

例如考虑包含以下代码的less/badges.less：

  .badge {
  // Quick fix for badges in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
  }

对于上述.custom-class:extend(.btn) {};，不生成任何输出，但.custom-class:extend(.btn all) {};会生成：

.custom-class .badge {
  position: relative;
  top: -1px;
}