具有LESS的Bootstrap 3:如何处理Bootstrap的嵌套规则? [英] Bootstrap 3 with LESS: how to handle bootstrap's nested rules?

问题描述

我正在竭尽所能，从我的HTML中删除尽可能多的Bootstrap的类"标记样式，并在有用的地方使用语义标记，但到目前为止，它仅在简单的情况下有效.

I'm doing my best to remove as many Bootstrap' "classes" markup style from my HTML as I can, and use semantic tags where useful, but so far it only works in simple cases.

当原始类具有很多嵌套规则时，这将成为一场噩梦.例如，在下面的文档示例中(添加了大小调整规则):

When the original classes features a lot of nested rules, it becomes a nightmare. For instance, in the following example from the docs (with added sizing rules):

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

这样的规则就像一种魅力:

Rules like this works like a charm:

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

因此可以从HTML中删除这些列类.但是，尝试对按钮和表单控件执行相同的操作并不能很好地工作，因为存在许多嵌套规则来对这些元素进行样式设置.每次我从HTML中删除一个类时，例如使用

So these column classes can be removed from HTML. However, trying to do the same to buttons and form-controls doesn't work so well, because there's a lot of nested rules to style those elements. Everytime I remove a class from HTML, for instance with

input {
   .form-control;
}

根据类似Bootstrap的规则，该输入会丢失所有样式

That input loses every styling based on several Bootstrap's rules like

.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提出的每个小细节对每个小规则都是没有用的.

The following can be done, but IMHO it's unproductive to keep track of every little rule to every little detail BS pulls off:

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

有时可以使用

LESS':extend(* all)，但是我只有基本的使用经验，到目前为止，我仍然无法弄清楚如何使以下逻辑"工作，甚至可行:

LESS' :extend(* all) sometimes can be used, but I have only basic experience using it and so far I haven't been able to figure how to make the following "logic" works, or even if it's feasible:

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

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

但是所有这些extend()仍然不能复制每个嵌套规则.

But all those extend() still can't replicate every nested rule.

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

Am I missing any fundamental logic using LESS' extend() here? Is this even a worthy goal? So far I've limited what Bootstrap classes I'm removing, but I'm not sure if this is the proper way to go. These kind of problems arise a lot when dealing with common page elements in Bootstrap (nav headers, dropdowns, forms, ...).

推荐答案

首先，我将同意@ seven-phases-max的评论，但我认为我可以使用:extend伪类解释您的问题

In the first place i will agree with the comment of @seven-phases-max, but i think i can explain your problem with the :extend pseudo class.

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

If you take a look into Bootstrap's less/form-groups.less file, you will find the following code:

.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中进行编译.

The preceding code mean that the .input-group-lg > .input-group-btn > .btn child combinator will be compiled in your CSS too.

现在考虑下面的示例，减少代码的数量，并考虑到嵌套时，extend()将应用于所有父级:

Now consider the following example Less code and consider that when nested the extend() will be applied on all parents:

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

将编译为以下CSS代码:

Which will compile into the following CSS code:

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

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

In the above CSS the .class1 > div > div is not the selector you will need.

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

You can solve the above with the following Less code:

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

这些Less代码将编译为以下CSS代码:

These Less code will compile into the following CSS code:

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

这个例子向您展示了您还必须找到编译到Bootstrap CSS中的类关系，并在您的:extends()中使用它们.如@ seven-phases-max所述，这些关系很容易改变.

This example show you that you also will have to find class relations compiled into Bootstrap's CSS and use them in your :extends(); these relation can easily change as already mentioned by @seven-phases-max.

还请注意，在示例Less代码中还包含一个未嵌套的.class2的情况下，例如:

Also notice that in the case that the example Less code also contains an .class2 which is not nested such as:

.class2 {
p:4;
}

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

The .class2 class will change you extended class to:

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

在编译后的CSS中，您将找到以下代码:

In your compiled CSS you will find the following code:

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

由于.class2 all而导致的.class1 > div > div毫无意义. 同样，例如，当Less代码包含.class2的其他外观时:

Where the .class1 > div > div due to the .class2 all makes no sense. Also when the Less code contains other appearances of the .class2 for instance:

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

:extend()中的.class2 all将导致很多不必要的选择器.

The .class2 all in the :extend() will cause a lot of unwanted selectors.

这篇关于具有LESS的Bootstrap 3:如何处理Bootstrap的嵌套规则?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！