覆盖Twitter Bootstrap Less不工作，添加新东西工作

问题描述

Twitter Bootstrap是很容易建立在它的顶部。现在我遇到一个问题，我不能解决。我使用TB v。2.3.2。

Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.

在我自己的 style.less 文件中，我包括TB：

In my own style.less file, I included TB:

@import "../bootstrap/less/bootstrap.less"; 

在原始TB文件中， forms.less ，可以找到此LESS：

In the original TB files, forms.less, this LESS can be found:

// INPUT GROUPS
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
  display: inline-block;
  margin-bottom: @baseLineHeight / 2;
  vertical-align: middle;
  font-size: 0; // white space collapse hack
  white-space: nowrap; // Prevent span and input from separating

  .add-on {
    display: inline-block;
    width: auto;
    height: @baseLineHeight;
    min-width: 16px;
    padding: 4px 5px;
    font-size: @baseFontSize;
    font-weight: normal;
    line-height: @baseLineHeight;
    text-align: center;
    text-shadow: 0 1px 0 @white;
    background-color: @grayLighter;
    border: 1px solid #ccc;
  }
}

所以在我自己的样式表中@import引导文件，我trie改变背景颜色 .add-on 像这样（应该变成粉红色，而不是@grayLighter你在上面的代码中找到）：

So in my own stylesheet after after the @import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of @grayLighter you find in the above code):

.input-append,
.input-prepend {
    .add-on {
        color: blue;    
        background-color: pink;
    }
}

现在，我添加的颜色加工！这不会覆盖值，因为 forms.less 中的 .add-on 没有指定任何颜色。但是你可以看到它有一个背景颜色（@grayLighter），我想改变！你看，我已经指定这是粉红色，但它不工作。我不明白这一点。有人可以帮助我吗？

Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (@grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?

我在样式表中使用这些Less，如下：

I use these Less further down in my stylesheet like this:

div {
    .input-prepend;
    .form-search .input-prepend;

    label {
        .input-prepend > .add-on;
    }
 }

如下图所示，粉红色背景颜色不工作。

As you can see in below image, the pink background color is not working.

>

我检查了CSS中LESS的输出如何，并且在那里写了我的问题。进一步我挖掘这更多我不明白它，一个codepen例子DOES SHOW PINK作为背景，这应该是在我看来，这里的工作示例：。

I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.

.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;     // FIRST MENTION BG COLOR IN FORMS.LESS
  border: 1px solid #ccc;
}

.input-append .add-on,
.input-prepend .add-on {
  color: blue;
  background-color: pink;     // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}

// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?

#woocommerce_product_search-3 #searchform div label {
  color: blue;
  background-color: pink;   // WHY IS THIS SHOWING UP FIRST?
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;       // WHY IS THIS SHOWING UP LAST?
  border: 1px solid #ccc;
  vertical-align: top;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-right: -1px;
  margin-bottom: 0;
}

20-7-2014：好的，现在我真的很困惑！而不是直接覆盖在我自己的style.less直接，我把相同的代码在一个不同的更少的文件，并导入它与@import，现在它的工作...但CSS中的输出是完全相同的，除了事实现在最后提到背景颜色PINK！

20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with @import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!

.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;
  border: 1px solid #ccc;
}

.input-append .add-on,
.input-prepend .add-on {
  color: blue;
  background-color: pink;
}

#woocommerce_product_search-3 #searchform div label {
  display: inline-block;
  width: auto;
  height: 24px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background-color: #eee;
  border: 1px solid #ccc;
  vertical-align: top;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-right: -1px;
  color: blue;
  background-color: pink;     // NOW IT'S MENTIONED LAST!
  margin-bottom: 0;
}

推荐答案

这只适用于mixins，另请参阅：

In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin

为HTML样式设计样式：

To style your HTML:

<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>

尝试以下代码：

@import "bootstrap.less";

#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;    
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}    
}

这篇关于覆盖Twitter Bootstrap Less不工作，添加新东西工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！