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.

Answer 2

Starting from lesscss 1.7.0, this should be possible by using "detached rulesets", but unfortunately, even with 1.7.5 I get "ParseError: Unrecognised input" when I try the use the detached ruleset syntax

http://lesscss.org/features/#detached-rulesets-feature

[EDIT]: I got the parse error because I dropped the semi-colon after the ruleset definition, but it works fine - ruleset does not have parameters, it is actually a variable, so it's definition can be overriden

Answer 3

If you are importing Bootstrap less files in your project then you can try to edit/overwrite the Bootstrap component radius variables:

@border-radius-base: 0px;
@border-radius-small: 0px;
@border-radius-large: 0px;

if not then you can recompile and download Bootstrap CSS code setting 0px values to those variables in http://getbootstrap.com/customize/