4

我正在使用 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 文件中，我有两个body 类，一个是原始的，然后是我自己的。如何在不重复的情况下向类添加属性？谢谢你。

4

1 回答 1

5

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

现在您可能会遇到与覆盖相关的问题，并试图弄清楚为什么您应用的样式没有覆盖引导程序的样式。在这种情况下，我建议您阅读 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;
}

EDIT, answer for @Chris Moschini comment

Yes you can also override Bootstrap default values through LESS if you create your own less file which imports bootstrap.less - and then override the variables you want to change.

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

To see what you can override look at the file variables.less on git, you can also checkout the mixins.less file if you'r looking to mess around there too.

But in many cases you'll need to do some overriding through css specificity.

于 2013-02-24T15:33:40.540 回答