Overwrite less mixin

Question

I wish to remove border radius from all the elements in Bootstrap. So I created custom-mixins.less and placed following lines in it, hopping that it would overwrite the original .border-radius mixin but didn't.

// Border Radius
.border-radius(@radius) {      
}

So I tried following lines as an alternative which actually worked.

// Border Radius
.border-radius(@radius) {
  @radius : 0px;
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

I tried some mixins at http://less2css.org. It seems that less instead of overwriting the mixins, appends all the properties from later mixin to the original one. Is there any cleaner and easier solution to this????

Answer 1

Less works exactly like CSS does in this respect. For example, if you wrote this CSS:

p { border: 1px solid black; }

It would give all paragraphs a black border. If later in the document you added:

p { }

You wouldn't expect it to overwrite your previous definition, right?

So, in this case it's the expected behaviour, you need to specifically overwrite the CSS values you want to overwrite.