在 LESS 中覆盖

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

如前所述，最好不要修改 bootstrapsless 文件，而是将样式添加到将覆盖 bootstraps 的样式表/less 文件中。这样您就可以在升级到新版本的引导程序时避免出现问题 - 当您需要跟踪错误时，只需查看您的覆盖就会容易得多。

现在您可能会遇到与覆盖相关的问题，并试图弄清楚为什么您应用的样式没有覆盖引导程序的样式。在这种情况下，我建议您阅读 Andy Clarke 的精彩文章 - CSS：Specificity Wars（它有点旧，但仍然是对 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 文件，您也可以通过 LESS 覆盖 Bootstrap 默认值 - 然后覆盖您要更改的变量。

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

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

但在许多情况下，您需要通过 css 特异性进行一些覆盖。