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中编译。

现在考虑以下示例Less代码并考虑嵌套时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不是您需要的选择器。

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

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;
}
}

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

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

1 个答案: