As a bonus, we'll add a fixed list of social media buttons at the left side of our page, which will look like that shown in the following screenshot:
First add the following HTML snippets at the end of the html/includes/footer.html file:
<div class="social-buttons fixed-media bg-accent-color">
<ul>
<li>FB</li>
<li>TW</li>
<li>G+</li>
</ul>
</div>
Notice that the bg-accent-color is added to the wrapping <div> element.
The only SCSS code we have to edit to the scss/includes/_footer.scss is as follows:
.social-buttons {
&.fixed-media {
display: none;
@include media-breakpoint-up(md) {
position: fixed;
top: 150px;
display: block;
}
}
}
As you can see, Sass enables you to reuse most of the SCSS code you have coded...