为什么！在style.scss中使用了如此重要的东西？

Question

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

如果你想看一个我的意思的例子，请从13:45开始： https://www.youtube.com/watch?v=MDSkqQft92o&time_continue=24&app=desktop

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

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

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

有人有什么建议吗？

Answer 1

！重要意味着它前面的风格将被强迫＆＃34;在元素上，尽管其他样式可能设置。例如：

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

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

Answer 2

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