Overwriting Twitter Bootstrap Less not working, adding new things does work

Question

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.

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

@import "../bootstrap/less/bootstrap.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;
  }
}

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

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?

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.

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

Answer 1

Twitter Bootstrap is ment to easily build on top of it.

That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?

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

To style your HTML:

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

Try the following Less code:

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