Bootstrap less - 覆盖整个类答案

【问题标题】：Bootstrap less - override entire classBootstrap less - 覆盖整个类
【发布时间】：2015-04-16 19:58:35
【问题描述】：

我正在使用 Bootstrap 较少的文件。我宁愿不直接修改它们，因为这似乎是不好的做法。 我正在编辑的唯一文件是 bootstrap.less，因为我需要添加覆盖类。

在type.less我要修改这个：

.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  border-bottom: 1px solid @page-header-border-color;
}

所以我创建了一个新的_type.less，其中包含：

.page-header {
  background: blue;
}

这在 bootstrap.less 主文件中被引用：

@import "type.less";
@import "../bootstrap-custom/_type.less";

我遇到的问题是编译器将两个类都输出到bootstrap.css - 我想覆盖原来的类，以便它只使用我的实现。

这可能吗？

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

不要在主 bootstrap.less 中调用你的 less，在你的 less 文件顶部调用 bootstrap.less。

您还需要覆盖 .page-header 中的每个定义

.page-header {
     padding-bottom: 0;
     margin: 0;
     border-bottom: none;
     background: blue;
   }

【讨论】：

那么 less 没有一种机制，您可以使用自己的实现覆盖整个类？
遗憾的是，Less 在这方面与 CSS 完全一样。如果你在 Less 中重新声明一个类，它会将两个类都输出到 CSS 中——如果第一个声明中的属性没有被覆盖，它们将合并到结果输出（浏览器）中。如果属性被覆盖，则最后声明的类“获胜”。这就是为什么调用文件的顺序也很重要的原因。如果他在原始 bootstrap less 的顶部调用自己的 less，它将被 bootstrap.less 使用的任何内容覆盖，因为他的 less 将被插入到 bootstrap less 之前。
出于某种奇怪的原因，我无法再编辑我的评论了——当然，“他”是指你，不知何故我没有意识到你是提出这个问题的人。我很抱歉以第三人称与您交谈。非常抱歉。