Separating layout from visuals

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.

Note

There is no right or wrong way to split up Sass files. However, it's worth looking at mature and respected projects such as Twitter Bootstrap (https://github.com/twitter/bootstrap) and Foundation from Zurb (https://github.com/zurb/foundation) to see how they organize their code.

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...