Bootstrap 3 with LESS：如何处理 bootstrap 的嵌套规则？

Question

我正在尽我所能从我的 HTML 中删除尽可能多的 Bootstrap 的“类”标记样式，并在有用的地方使用语义标签，但到目前为止它只适用于简单的情况。

当原始类具有大量嵌套规则时，它就变成了一场噩梦。例如，在文档中的以下示例中（添加了大小规则）：

<div class="row">
  <div class="col-lg-6">
    <div class="input-group input-group-lg">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

这样的规则就像一个魅力：

div:first-child {
  .make-row();
  & > div {
    make-lg-column(6);
  }
}

所以这些列类可以从 HTML 中删除。然而，尝试对按钮和表单控件做同样的事情并不那么好，因为有很多嵌套规则来设置这些元素的样式。每次我从 HTML 中删除一个类时，例如使用

input {
   .form-control;
}

该输入会丢失基于多个 Bootstrap 规则的所有样式，例如

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn

可以做到以下几点，但恕我直言，跟踪 BS 推出的每一个小细节的每一个小规则是徒劳的：

input {
    .form-control;
    input-group .form-control;
    input-group .form-control:last-child;
}

LESS' :extend(* all) 有时可以使用，但我只有基本的使用经验，到目前为止我还无法弄清楚如何使以下“逻辑”工作，或者即使它是可行的：

div:first-child {
  .make-row();
  & > div {
    make-lg-column(6);

    div {
      &:extend(.input-group all);
      &:extend(.input-group-lg all);
      /* ... and so on */
  }
}

但是所有那些extend() 仍然无法复制每个嵌套规则。

我在这里使用 LESS' extend() 是否遗漏了任何基本逻辑？这甚至是一个有价值的目标吗？到目前为止，我已经限制了我要删除的 Bootstrap 类，但我不确定这是否是正确的方法。在处理 Bootstrap 中的常见页面元素（导航标题、下拉菜单、表单等）时，会出现很多此类问题。

Answer 1

首先我同意@seven-phases-max 的评论，但我想我可以用:extend 伪类解释你的问题。

如果您查看 Bootstrap 的 less/form-groups.less 文件，您会发现以下代码：

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  .input-lg();
}

前面的代码意味着.input-group-lg > .input-group-btn > .btn子组合器也将编译到你的CSS中。

现在考虑以下示例更少的代码，并考虑嵌套时，extend() 将应用于所有父级：

.class1 {
color:green;
> .class2 {
color:red;
}
}
div {
  > div {
        &:extend(.class2 all);
  }
}

这将编译成以下 CSS 代码：

.class1 {
  color: green;
}
.class1 > .class2,
.class1 > div > div {
  color: red;
}

在上面的 CSS 中，.class1 > div > div 不是您需要的选择器。

您可以使用以下 Less 代码解决上述问题：

div {
  > div:extend(.class1 > .class2 all){}
}  

这些 Less 代码将编译成以下 CSS 代码：

.class1 > .class2,
div > div {
  color: red;
}

这个例子告诉你，你还必须找到编译到 Bootstrap 的 CSS 中的类关系，并在你的 :extends() 中使用它们；正如@seven-phases-max 已经提到的，这些关系很容易改变。

另请注意，在示例 Less 代码还包含未嵌套的 .class2 的情况下，例如：

.class2 {
p:4;
}

.class2 类会将您的扩展类更改为：

div {
  > div:extend(.class1 > .class2 all, .class2 all){}
}  

在您编译的 CSS 中，您会发现以下代码：

.class1 > .class2,
div > div,
.class1 > div > div {
  color: red;
}

.class1 > div > div 由于.class2 all 而没有意义。 此外，当 Less 代码包含 .class2 的其他外观时，例如：

.class3 {
.class2 {
property: 4;
}
} 

:extend() 中的.class2 all 会导致很多不需要的选择器。