Question

我希望从Bootstrap中的所有元素中删除border radius。所以我创建了custom-mixins.less并在其中放置了以下行，跳转它将覆盖原始的.border-radius mixin，但没有。

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

所以我尝试使用以下行作为实际工作的替代方案。

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

我在http://less2css.org尝试了一些mixins。似乎较少而不是覆盖mixins，将所有属性从后来的mixin追加到原始属性。是否有更清洁，更容易的解决方案????

Answer 1

与CSS在这方面完全不同的作用。例如，如果你写了这个CSS：

p { border: 1px solid black; }

它会给所有段落一个黑色边框。如果您在文档的后面添加了：

p { }

你不会指望它会覆盖你之前的定义，对吗？

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

Answer 2

从lesscss 1.7.0开始，这应该可以通过使用“分离的规则集”来实现，但不幸的是，即使使用1.7.5，当我尝试使用分离的规则集语法时，我得到“ParseError：无法识别的输入”

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

[编辑]：我得到了解析错误，因为我在规则集定义后删除了分号，但它工作正常 - 规则集没有参数，它实际上是一个变量，因此它的定义可以被覆盖

Answer 3

如果要在项目中导入Bootstrap less文件，则可以尝试编辑/覆盖Bootstrap组件半径变量：

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

如果没有，那么你可以重新编译并下载Bootstrap CSS代码设置0px值到http://getbootstrap.com/customize/

中的那些变量

覆盖较少的mixin

3 个答案: