覆盖更少的混合 [英] Overwrite less mixin

问题描述

我希望从Bootstrap中的所有元素中删除border radius.因此，我创建了custom-mixins.less并在其中放置了以下几行，希望它会覆盖原始的.border-radius mixin，但不会.

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

我在http://less2css.org尝试了一些混合.似乎没有取代覆盖混合的方法，而是将后来混合的所有属性附加到原始属性中.有没有更清洁，更轻松的解决方案?

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????

推荐答案

在这方面，更少的工作就像CSS一样.例如，如果您编写了以下CSS:

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?

因此，在这种情况下，这是预期的行为，您需要专门覆盖要覆盖的CSS值.

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

这篇关于覆盖更少的混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！