压倒少数

Question

我正在使用LESS使用Bootstrap,我是LESS的新手,所以我有疑问.

例如,我想向body添加padding属性.

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

在bootstrap.less我做了这个:

@import "bootstrap/scaffolding.less";
body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
  padding: 50px;
}

但是在编译的CSS文件中,我有两个正文类,一个是原始的,然后是我自己的.如何在没有重复的情况下向类添加属性？谢谢.

Answer 1

如前所述,最好不要修改bootstraps较少的文件,而是将样式添加到样式表/ less文件中,以覆盖bootstraps.通过这种方式,您可以在升级到新版本的bootstrap时避免出现问题 - 当您需要跟踪错误时,只需查看覆盖内容就会更容易.

现在,您可能遇到与覆盖相关的问题,并试图弄清楚为什么您的应用样式不会覆盖bootstrap的样式.在那种情况下,我建议你阅读Andy Clarke的伟大文章 - CSS:特殊性战争(它有点陈旧,但仍然是对css特异性的一个很好的解释):

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

编辑 - 为了更好地解释多个类块的优点,这里首先使用两个类来设置一个元素的样式:

CSS:

.center {
   margin: 0 auto;
}
img.center {
   display: block;
}

HTML

<div class="center">This will center horizontally</div>
<img class="center" src="foo.png"><!-- this image will also center horizontally -->

在上面的示例中,图像将居中,因为它将继承这两个规则.现在假设您希望嵌套的ul具有比常规(父)ul更少的填充量,然后您可以通过定位其层次结构来覆盖它(再次上面发布的链接解释了这一点)

ul {
    list-style: none;
    padding: 5px;
}

ul ul {
    padding: 1px;
}

编辑,回答@Chris Moschini评论

是的,如果你创建自己的较少文件导入bootstrap.less,你也可以通过LESS覆盖Bootstrap默认值 - 然后覆盖你想要更改的变量.

@import "less/bootstrap.less";
@brand-primary: red;

要查看你可以覆盖的内容,请查看git 上的文件variables.less,如果你想在那里混乱,也可以查看mixins.less文件.

但在许多情况下,你需要通过css特异性做一些重写.