覆盖 SCSS 属性

Question

为此，我在我的 github 页面中添加了一个 assets/css/style.scss，内容如下

 ---
 ---

@import "{{ site.theme }}";

#banner {
    background: #a90000;
    border: 1px solid #3399cc;
}

但没有任何改变。如何在 SCSS 中覆盖横幅 div 的这些值？

Answer 1

这可能不起作用的原因有很多。在不熟悉输出和 html 你正在设计样式的情况下，你应该检查一些事情（所有这些你都可以通过浏览器开发人员工具检查。例如 Chrome DevTools ）

带有 id="banner" 的元素存在于您的 html 中并且可见。
您对 SCSS 添加的内容实际上已包含在内并应用于该元素。您可以通过检查元素在 Chrome 开发人员工具中进行检查。在样式下，您应该能够看到您的样式规则和其他样式规则。如果你不能，那么你可能有一个选择器问题，可能是由一些早期的嵌套样式引起的。（如果您也排除了这种可能性，并且您添加的内容没有出现在输出中的任何地方，那么您构建和获取 SCSS 的方式出了问题）。
如果您能看到它们但有一条线穿过它们，那么它们将被具有更高 CSS 特异性的规则否决。您可以通过使选择器更具体来解决此问题。例如。

div#banner {
    background: #a90000;
    border: 1px solid #3399cc;
}

或者

.someWrappingClass #banner{
    background: #a90000;
    border: 1px solid #3399cc;
}

请记住，这些将改变它们的选择方式 - 如果 HTML 发生变化，这可能会在以后成为一个问题。

实际上，如何正确解决特异性问题将完全取决于您的 HTML、您如何构建它以及您将来可能如何更改它。真的没有什么比学习 cascade and inheritance 的工作原理更好的了。

Overwriting SCSS attributes