Question

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

例如，我想将 padding 属性添加到 body 。

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的样式。在这种情况下，我建议你阅读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评论

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

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

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

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

压倒少数

1 个答案: