twitter-bootstrap - 扩展 Bootstrap 3 LESS .btn-group 不工作

Question

最终，我试图用 LESS 完成以下样式。

<div class="filter btn-group">
    <button class="btn btn-default" type="button" data-filter="*">show all</button>
    <button class="btn btn-default" type="button" data-filter=".cd">CD</button>
    <button class="btn btn-default" type="button" data-filter=".vinyl">Vinyl</button>    
</div>

我有以下 HTML

<div class="filter">
    <button type="button" data-filter="*">show all</button>
    <button type="button" data-filter=".cd">CD</button>
    <button type="button" data-filter=".vinyl">Vinyl</button>
</div>

我在导入 Bootstrap 3 的 LESS 文件中有这个

.filter {
    .btn-group;
    button {
        .btn;
        .btn-default;
    }
}

将 .btn 和 .btn-default 添加到按钮时效果很好。但是将 .btn-group 添加到包装器“.filter”是行不通的。我不知道我做错了什么。如果我将类 .btn-group 手动添加到

class="filter btn-group"

它有效。

Answer 1

已编辑

虽然我想不出一种方法来完全完成您想要的，但在 @seven-phases-max 的帮助和启发下，我能够调整该要点以获得您想要的结果。

要了解其工作原理，“步骤”是:首先，将按钮选择器视为 .btn.btn-default。其次，找到 .btn-group 选择器的所有实例并将其替换为 .filter。最后，在 .filter 中找到 .btn 的所有实例，并将它们替换为按钮。

您可以使用扩展(在 Less v1.4.0+ 中可用)来完成此操作。下面是 less 文件的一个简单示例:

@import "bootstrap.less";
button {
    .btn-default();
    &:extend(.btn, .btn.btn-default all);
}
.filter:extend(.btn-group all) {}
.filter > button:extend(.btn-group > .btn all) {}
.filter button + button:extend(.btn-group .btn + .btn all) {}

您需要确保任何扩展都放置在其他导入之后，因为扩展的所有行为都像(非破坏性的)搜索和替换。因此，例如，上面的第一个扩展在任何规则选择器中找到 .btn 的所有实例，并复制该选择器，将 .btn 替换为按钮。

生成的输出允许将以下样式设置为类似 btn 组的样式:

<div class="filter">
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
</div>

注意事项

1. 正如 seven-phases-max 在几条评论中所指出的，这将为您的输出增加相当多的额外权重，因为它是一种非破坏性搜索和替换。它将大约 9Kb 添加到未压缩/未压缩的输出中。
2. 您不能将这种类型的扩展标签用于具有 data-toggle="buttons" 属性的复选框或单选按钮，因为 button.js 中的 BUTTON DATA-API 正在专门寻找该类.btn 与寻找按钮元素。