The Sass folder structure loosely follows the concepts discussed at https://medium.com/p/7fe19ab647fa.
This folder contains only partials and is reserved for project-wide CSS. Ideally, all of the CSS in here is as close to project-agnostic as possible. In other words, there are several files in here that could show up in any of your projects.
This folder contains only partials. Mixins relating to any partial in the /framework folder. Also included here are any completely generic mixins.
Differs from modules (in the above article) since modules in Drupal have a very different meaning.
This folder also contains only partials and is reserved for reusable UI patterns. As a general rule of thumb, anytime you anticipate needing the same CSS more than once, you should modularize it. The more your project matures, the more CSS you should be able to compartmentalize into components. Preferably, if any component needs a mixin, a mixin should be created in /components/mixins using the same name as the component file.
Components within a component file should be created using silent placeholders:
%silent-identifier {}
Using silent placeholders dramatically reduces the duplication of styles within the compiled css file.
This folder contains only partials. Mixins relating to any partial in the /components folder.
This folder contains only partials. Includes the layout config, and the layout partials themselves.
This folder contains only partials. Some files in here will be a sass partial, while others will simply be the original vendor CSS files with their extensions changed to .scss.
With that in mind, this folder also contains an override partial. Any time you need to override a vendor style, write that CSS there. This allows you to upgrade a plugin at any time without losing any custom changes that you've made.
This folder contains only partials. Section folders are where any CSS that has not (yet) been modularized lives. Depending on the project, you might have a dozen section folders or none. For many projects, these could be as simple as:
/sections/user
/sections/homepage
/sections/blog
If you really want to keep your files neat and tidy, you could even nest additional section folders inside of each other. Be creative.
Within each section folder/file, you should @extend the silent placeholders you created in the /framework and /component files. Example:
.some-selector {
@extend %silent-identifier;
}
Very minimal actual css goes in here.
Most actual css code goes into /framework and /components partials. "Use" the partials in /sections partials. When in doubt, create something generic, and the use it with an @extend.
Some credits:
https://medium.com/p/7fe19ab647fa
http://www.slideshare.net/JohnAlbin/sassconf-managing-complex-projects-with-design-components