css - 更少的继承和层次结构，有什么问题？

Question

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

我正在尝试从 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;
}