Common Sass Structures

An example would be

scss
|__ style.scss
|__ base
|   _index.scss
|   _base.scss      
|__components
|   _index.scss
|   _buttons.scss
|   _icons.scss
|   _typography.scss
|   etc...
|__layout 
    _index.scss
    _header.scss
    _footer.scss
    _containers.scss
    _columns.scss
    etc...

_index.scss

Use these files to import the partial files from each directory into one file.
For example, the components’ index file is importing all the partials in the components directory.

/* Components Imports ====================== */
@import 'buttons';
@import 'icons';
@import 'typography';

So now instead of importing every single partial inside our global application style sheet.
We only need to import the single index reference from each directory into application.scss.

style.scss

/* Global Imports ====================== */
@import 'base/index';
@import 'layout/index';
@import 'components/index';

We only need to import the single index reference from each directory into application.scss.
This makes everything a lot more manageable.