覆盖SCSS属性

Question

我正在尝试更改Jekyll跨天主题横幅的颜色，这里https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss

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

 ---
 ---

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

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

但是什么都没有改变。如何在SCSS中覆盖banner div的这些值？

Answer 1

有许多原因可能导致此操作不起作用。在不熟悉输出和html的情况下，这里需要设置样式（您可以通过浏览器开发者工具进行检查。例如Chrome DevTools）

1. 带有id="banner"的元素已存在于您的html中，并且可见。
2. 您对SCSS的添加实际上已包括在内，并已应用于该元素。您可以通过检查元素在Chrome开发人员工具中进行检查。在样式下，您应该能够同时看到样式规则。如果不能，则可能是选择器问题，可能是由某些早期的嵌套样式引起的。 （如果您还排除了这一点，并且您的添加项没有出现在输出中的任何地方，那么您构建和获取SCSS的方式就会出问题。）
3. 如果您可以看到它们，但它们之间有一行，则表示它们被具有更高CSS特异性的规则所取代。您可以通过使选择器更具体来解决此问题。例如。

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

也许

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

请记住，这些将更改它们的选择方式-如果HTML更改，以后可能会出现问题。

真正如何正确解决特异性问题将完全取决于HTML，HTML的结构以及将来的更改方式。真的没有什么可替代的，只是学习cascade and inheritance的工作原理。