Sass Project Setup

gistfile1.md

File organisation

The file organisation is broken down into these main groupings.

• Global
  This contains site configuration variables and a _shame.scss file which contains any hacks.

• Elements
  These are the building blocks of any module or page. For example, icon fonts, typography, grids, inputs and buttons.

• Modules
  There are the components of the site, made up of elements. For example, a search form, navigation bar, pagination, carousels, media element, etc

• Pages Any page specific styles. This is optional and should only be needed on rare occasions.

File structure and naming

The elements and modules folders are broken down into their distinct bits. For example elements/animation, elements/grid, elements/icon-fonts, etc. There could be up to four separate .scss files in those folders. For example:

• grid/_grid.conf.scss
  Contains any configuration, variables or includes (Compass, etc) relating to grids

• grid/_grid.func.scss
  Contains any Sass functions relating to grids

• grid/_grid.ext.scss
  Contains any placeholder classes relating to grids

• grid/_grid.mix.scss
  Contains any mixins relating to grids

As well as those files, in the root of the element folder there’s a manifest file which imports each of the grid partials. This makes for easy inclusion in the main style.scss file. Here's the grid manifest file:

@import "grid/grid.conf";
@import "grid/grid.mix";
@import "grid/grid.ext";

And this is what the main style.scss files would look like:

@import "compass";

@import "global/config";
@import "normalize"; // this is a compass extension

// Import Elements
@import "elements/global";
@import "elements/grid";

This is what a typical folder structure might look like:

sass
|--- global
|    +-- _conf.scss
|    +-- _mix.scss
|    +-- _ext.scss
|--- elements
|    |--- animation
|    |    +-- _animation.conf.scss # settings, includes, variables
|    |    +-- _animation.mix.scss # mixins
|    |    +-- _animation.ext.scss # placeholders
|    |    +-- _animation.func.scss # functions
|    |--- buttons
|    |    +-- _buttons.conf.scss # settings, includes, variables
|    |    +-- _buttons.mix.scss # mixins
|    |    +-- _buttons.ext.scss # placeholders
|    |    +-- _buttons.func.scss # functions
|    |--- forms
|    |    +-- _forms.conf.scss # settings, includes, variables
|    |    +-- _forms.mix.scss # mixins
|    |    +-- _forms.ext.scss # placeholders
|    |    +-- _forms.func.scss # functions
|    |-- _animation.scss
|    |-- _buttons.scss
|    |-- _forms.scss
|--- modules
|    |--- accordion
|    |    +-- _accordion.conf.scss # settings, includes, variables
|    |    +-- _accordion.mix.scss # mixins
|    |    +-- _accordion.ext.scss # placeholders
|    |    +-- _accordion.func.scss # functions
|    |--- article
|    |    +-- _article.conf.scss # settings, includes, variables
|    |    +-- _article.mix.scss # mixins
|    |    +-- _article.ext.scss # placeholders
|    |    +-- _article.func.scss # functions
|    |--- blocks
|    |    +-- _blocks.conf.scss # settings, includes, variables
|    |    +-- _blocks.mix.scss # mixins
|    |    +-- _blocks.ext.scss # placeholders
|    |    +-- _blocks.func.scss # functions
|    |--- footer
|    |    +-- _footer.conf.scss # settings, includes, variables
|    |    +-- _footer.mix.scss # mixins
|    |    +-- _footer.ext.scss # placeholders
|    |    +-- _footer.func.scss # functions
|    |--- header
|    |    +-- _header.conf.scss # settings, includes, variables
|    |    +-- _header.mix.scss # mixins
|    |    +-- _header.ext.scss # placeholders
|    |    +-- _header.func.scss # functions
|    |-- _accordion.scss
|    |-- _article.scss
|    |-- _blocks.scss
|    |-- _footer.scss
|    |-- _header.scss
+-- style.scss

Great, thanks for that. Both very good ideas :)