Overwriting SCSS attributes

Question

I am trying to change the color of the banner in the Jekyll leap-day theme, here https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss

To do that, I have added an assets/css/style.scss to my github page, with the following contents

 ---
 ---

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

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

But nothing changed. How can I overwrite these values of the banner div in SCSS?

Answer 1

There are a number of reasons why this might not be working. Without being familiar with the output and html you are styling here are some things you should check (all of which you can check through browser developer tools. e.g. Chrome DevTools )

1. The element with id="banner" exists in your html and is visible.
2. Your additions to the SCSS are actually being included and are being applied to the element. You can check this in Chrome developer tools by inspecting the element. Under styles you should be able to see your style rules alongside the others. If you can't then it you may have a selector issue, likely caused by some earlier nested styles. (If you have also ruled that out, and your additions are not appearing anywhere in the output then something is going wrong with how you are building and fetching your SCSS).
3. If you can see them but they have a line through them, then they are being overruled by rules with a higher CSS specificity. You can fix this by making your selectors more specific. E.g.

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

Or perhaps

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

Bearing in mind that these will change how they are selected - which could be an issue later if the HTML changed.

Really how you fix specificity issues properly will depend entirely upon your HTML, how you structure it and how you might change it in future. There really is no substitute for just learning how cascade and inheritance works.