Overwrite less mixing

Question

I want to remove border radius from all elements in Bootstrap. Thus, I created custom-mixins.less and placed the following lines in it, hoping that it would overwrite the original .border-radius mixin, but did not.

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

So, I tried the following lines as alternatives that really worked.

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

I tried several mixins at http://less2css.org . It seems that less than rewriting mixins, it adds all the properties from a later mixin to the original. Are there any cleaner and simpler solutions for this?

Answer 1

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

 p { border: 1px solid black; } 

This will give all paragraphs a black border. If later in the document you added:

 p { } 

You did not expect him to rewrite your previous definition, right?

So, in this case, this is the expected behavior, you need to specifically overwrite the CSS values ​​that you want to overwrite.

Answer 2

Starting with lesscss 1.7.0, this should be possible with "separate rule sets", but unfortunately, even with 1.7.5 I get "ParseError: Unrecognized input" when I try to use the syntax of a debugged rule set

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

[EDIT]: I got a parsing error because I dropped the semicolon after defining the ruleset, but it works fine - the ruleset has no parameters, it is actually a variable, so the definition can be overridden

Answer 3

If you import Bootstrap fewer files into your project, you can try editing / overwriting the radius variables of the Bootstrap component:

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

if not, then you can recompile and load the Bootstrap CSS code by setting the 0px values ​​for these variables at http://getbootstrap.com/customize/