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

<强> EDITED

虽然我无法想出一种完全达到你想要的方法，但在@ seven-phases-max的帮助和灵感下，我能够调整这个要点以获得你想要的结果。

为了了解它是如何运作的，“步骤”＆＃39;是：首先，将按钮选择器视为.btn.btn-default。其次，找到.btn-group选择器的所有实例并将其替换为.filter。然后，最后，在.filter中找到.btn的所有实例，并用按钮替换它们。

您可以使用extend（在Less v1.4.0 +中提供）来完成此操作。以下是较少文件的简单示例：

@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) {}

你需要确保在你的其他导入之后放置任何扩展，因为扩展都像（非破坏性）搜索＆amp;更换。因此，上面的第一个扩展，例如，在任何规则选择器中查找.btn的所有实例，生成选择器的副本，用按钮替换.btn。

结果输出允许将以下样式设置为btn-group：

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

<强> CAVEATS

正如七阶段max中的几条评论所指出的那样，这会给你的输出增加一些额外的分量，因为它是一种非破坏性的搜索和替换。它为未经压缩/未压缩的输出增加了大约9Kb 。
你不能使用这种类型的扩展名为data-toggle="buttons"属性的复选框或单选按钮作为按钮内的BUTTON DATA-API.js专门针对类.btn而不是寻找按钮元素。

扩展Bootstrap 3 LESS .btn-group无法正常工作

1 个答案: