为什么 !important 在 style.scss 中使用了这么多？答案

【问题标题】：Why is !important used so much in style.scss?为什么 !important 在 style.scss 中使用了这么多？
【发布时间】：2018-04-05 14:32:27
【问题描述】：

在 Bootstrap 教程中，当人们在自定义 style.scss 中创建自己的 Sass 变量时，我看到很多人使用尾随 !important。

.navbar {
  width: 100%;
  background none !important;

  @media(max-width: 34em) {
    background: black !important; 
  }
}

但是.scss 文件中的其他代码不使用!important。没有解释为什么会这样。

有人有什么建议吗？

【问题讨论】：

【解决方案1】：

!important 意味着它前面的样式将被“强制”到元素上，尽管它上面可能设置了其他样式。例如：

.element {
  font-weight: bold;
}
.custom-class {
  font-weight: normal !important;
}

如果您有<span class="custom-class element"></span>，它将显示正常的字体粗细，而不是粗体。

【讨论】：

【解决方案2】：

！重要保证（或至少它尝试）您尝试应用的规则比其他规则更重要。因此，它会覆盖可能会干扰新规则的其他规则。！如果规则排序正确，则不需要重要，因为最后的规则优先于以前的规则。！必须尽可能避免重要。仅在确实需要时才使用它。

【讨论】：