add a prefix like header- or footer- for specific sections:
// Header
$header-height: 100px;
$header-background-color: $color-brand;
// Footer
$footer-height: 200px;
$footer-background-color: #aaa;
I like to keep all my variables in a single file, called _config.scss, that I include in
my primary stylesheet using the @import directive.