scss-structure.markdown

stylesheets/
  application.scss
  base/
    _base.scss
    _grid.scss
    _reset.scss
    _typography.scss
  components/
    editor/
      _design.scss
      _layout.scss
  layouts/
    _two_column.scss
    _three_column.scss
    _full_width.scss
  pages/
    funnels/
  palettes/
    _colors.scss
    _fills.scss
    _skins.scss
    _labels.scss
  sections/
    bottom/
      _design.scss
      _layout.scss
    main/
      _design.scss
      _layout.scss
    top/
      _design.scss
      _layout.scss

Option A

If we have the idea of a "palette", then all of our reusable elements can go in there: colors, fonts, gradients, mixins, etc. Then we just dip into the palette and plug them into the correct parts: typography, header, footer, etc. Then inside header/footer, for example, we would have body layout (padding: 10px) and design (border: $header-border);

Option B

We could also have, for each structure on the page (header, footer, main, menu, etc.) a _design.scss and a _layout.scss. Then _header.scss would look like this:

@import "layout.scss";
@import "design.scss";

We would still have the idea of a palette, but we would add on top of that a separation of design and layout.

The main issue with this is the sheer number of files and directories this would create, enough I'd say to get in the way.

Option C

Use palettes, and separate design and layout, but separate them from within the same file. So _header.scss would look like this:

/* LAYOUT */
.header_logo {
  position: relative;
  left:     20px;
}
// more layout styles...
/* DESIGN */
.header_logo {
  color: $text-color;
  @include header-background-box;
}

from generic to specific: base -> palettes -> components -> sections -> pages