Before getting into nesting, @extend, placeholders, and mixins, it makes sense to create some partial files for organizing the styles.

Rather than create a partial Sass file for each structural area (the header, footer, and navigation), and lump all the visual styles relevant inside, we can structure the code in a slightly more abstract manner.

We'll create a partial file called _base.scss that will contain some base styles:

body {
    font-size: 1em;
    line-height: 1.4;
}
::-moz-selection {
    background: $color1;
    text-shadow: none;
}
::selection {
    background: $color1;
    text-shadow: none;
}

Then a partial file called _layout.scss. That will only contain rules pertaining...