How to structure a Sass project :

Basic directory structure :

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

Primary stylesheet :

// Modules and Variables
@import "partials/base";

// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...

// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";

As you can see this divides my project into three basic types of files. Modules, partials,

and vendored stylesheets.

Module :

The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin

declarations, functions, and variables.

Partials :

The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into

header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break

things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).

Vendors :

The vendor directory is for third-party CSS. This is handy when using prepackaged components developed by other people (or

for your own components that are maintained in another project). jQuery UI and a color picker are examples of CSS that you

might want to place in the vendor directory.

One step further :

 stylesheets/
|
|-- admin/           # Admin sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # Account sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # Site sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # CSS or Sass from other projects
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # Primary stylesheets for each project
|-- account.scss
`-- site.scss